CSS中如何实现背景图片透明并且固定和文字不透明效果

设置背景图片的透明度，并且该背景图片不随鼠标滚动而移动，我们可以使用滤镜filter中的透明度设置opacity，并使用伪类before和定位

至于opacity的作用:转化图像的透明程度。值定义转换的比例：值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

<body>里面不能直接设置图片的透明度，需要借助<div> ，此时添加文字为不透明效果，详情还见注释

以下为代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;              /* 消除边界*/padding: 0;}body{position: relative;     /*为下面的absolute提供父元素定位*/height: 5000px;       /*此可以预先设置你需要做的网站的高度，也可以不用设置，但需要一定的内容支撑*/}#box1:before{               /*使用before 选择器在被选元素的内容前面插入内容。*/width: 100%;height: 100%;           /*设置为全屏背景模式*/background-image: url(image/my19.png);background-size: 100% 100%  ;background-attachment: fixed;      /*将图片固定*/position: absolute;                 /*图片定位*/top: 0;left: 0;content: "";z-index: -1;                    /*设置该标签等级，让其始终位于最上层*/-webkit-filter: opacity(70%);   /*设置透明度   blur还可以改变照片的模糊度*/filter: opacity(70%);}.box2{line-height: 100px;font-size: 40px;text-align: center;}</style>
</head>
<body><div id="box1" ><div class="box2"><br><br><div>CSS中如何实现背景图片透明并且固定和文字不透明效果</div><div>使用filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();</div></div></div>
</body>
</html>

运行结果如下：

（PS：第一次写博客，如有错误还望指出)

CSS中如何实现背景图片透明并且固定和文字不透明效果相关推荐

CSS中如何制作背景图片半透明但内容不透明的效果
CSS中如何制作背景半透明但内容不透明的效果一.利用伪元素:before添加一个半透明的背景,并利用position定位属性,设置z-index值为-1,显示在下层. css: <style& ...
vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件修改成为如下所示内容: 添加红框中的内容即可 ...
CSS中设置页面背景图片
设置背景图片的用法与注意事项 1.背景图片 background-image:url("图片路径") 可以是相对路径和绝对路径例如: background-image: url( ...
html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
电脑桌面怎么设置html背景图,css中如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css怎样设置背景图片? css back ...
laravel项目中css样式表的背景图片不显示
刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd {background: url(../images/sky/body ...
CSS添加多个背景图片
CSS添加多个背景图片如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性. 因此,只有给多个标记添加不同背景来实现,比如,在body标记设置了背景图片的基础上,可以再 ...
Visual Studio中如何设置背景图片，壁纸
学习编程是一个漫长的过程,设置一个自己喜欢的背景图片,可以给我们的学习过程添加一些乐趣. 下面是效果图目录 1.在扩展中下载ClaudialDE 2.设置背景图片 3.隐藏窗口 3.或使窗口透明 4 ...
html背景图片css怎么添加,css样式怎么插入背景图片？
css样式怎么插入背景图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,给html元素添加背景图,主要通过background-image ...

CSS中如何实现背景图片透明并且固定和文字不透明效果

CSS中如何实现背景图片透明并且固定和文字不透明效果相关推荐

最新文章

热门文章