小知识: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;
}
声明: 猿站网有关资源均来自网络搜集与网友提供,任何涉及商业盈利目的的均不得使用,否则产生的一切后果将由您自己承担! 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除,制止非法恶意传播,不对任何下载或转载者造成的危害负任何法律责任!也请大家支持、购置正版! 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报,会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络,如有侵权烦请发送邮件至:2697268773@qq.com进行处理。
建站知识

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

2022-5-21 21:04:56

建站知识

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

2022-5-21 21:15:05

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