css的高级用法

简介: 模糊背景图片(:before)类似这样的效果之前、之后重点注意:颜色的变化,之后的图片相比之前的好像更暗淡一些banner放置类似上面的图片.

模糊背景图片(:before)

类似这样的效果

  • 之前


    img_281fab19dc0c053a09d9435160d0307e.png

  • 之后
img_1db1d50bcba728d544bce5a21b876ee5.png

重点注意:颜色的变化,之后的图片相比之前的好像更暗淡一些

<div class="banner"></div>

banner放置类似上面的图片

.banner{
    width: 800px;
    height: 400px;
    position: relative;
    background: url(图片路径) no-repeat;
    background-size: cover;
}

.banner:before{
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(images/overlay.png);
    position: absolute;
    opacity: 0.5;
}

目录
相关文章
|
6月前
|
资源调度 前端开发 CDN
纯css动画库animate.css的用法
纯css动画库animate.css的用法
136 0
|
5月前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
120 2
CSS进阶-CSS选择器高级:伪类与伪元素
|
5月前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量,用于复杂二维布局。然而,隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
69 11
|
5月前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块,简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外,还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局,强调实践和理解核心概念是掌握Flexbox的关键。
71 10
|
4月前
|
前端开发
设计--字体样式---斜体,CSS字体属性用法
设计--字体样式---斜体,CSS字体属性用法
|
6月前
|
前端开发
css用法 :is()、:where()和:has()的用法
【4月更文挑战第2天】 css用法 :is()、:where()和:has()的用法
125 12
|
6月前
|
前端开发 UED
CSS 技巧涵盖了从基础到高级的诸多方面
【4月更文挑战第5天】CSS 技巧涵盖了从基础到高级的诸多方面
44 6
|
6月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
6月前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
57 0
|
6月前
|
前端开发
CSS弹性布局justify-content的用法
CSS弹性布局justify-content的用法