小知识:CSS:怎么样给背景图加透明度 opacity ?

方式一

CSS 中难以间接给左上方片加 opacity 特性,能采用下面的方式绕开那个管制:

div {
 width: 200px;
 height: 200px;
 display: block;
 position: relative;
 }

div::after {
 content: "";
 background: url(image.jpg);
 opacity: 0.5;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 position: absolute;
 z-index: -1;
 }

方式二

冗余两个div浮在相片下面,并增设有效性

body{
background: url("assets/i/bg.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}
.body_box{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(-160deg, rgba(57,214,239,.8) 0%,rgba(163,103,207,.8) 50%,rgba(248,24,122,.8) 100%) no-repeat;
}

建站知识

小知识:js把字符串(yyyymmddhhmmss)转换成日期格式(yyyy-mm-dd hh:mm:ss)

2022-5-21 21:04:56

建站知识

小知识:关于响应式布局,你必须要知道的

2022-5-21 21:15:05

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索