web中html+CSS修改背景图片的不透明度

在web的开发中，要增加一张背景图片，但是图片不透明度太高看着很不舒服，所以有必要降低图片不透明度。但是在body中增加一张背景图片后，不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div的。所以我个人的想法是采用一个div添加背景图片，直接让这张图片充满整个页面，而不是跟随着body内容大小设置背景图片。代码如下：
html代码：

<div class="my-background"></div>

css代码：

.my-background{position: fixed;height: 100%;width: 100%;background-image: url("../images/moroccan-flower.png");opacity: 0.3 ;
}

position设置为fixed，会固定在屏幕位置，根据height和width设置背景图片大小。如果将position改为absoluted，则最后只会根据屏幕的大小充满屏幕，对于屏幕下方的内容不会进行填充。
opacity为设置div的不透明度。因为div内没有放置内容，所以只会修改背景图片的不透明度，不会影响到内容。

web中html+CSS修改背景图片的不透明度相关推荐

锁定计算机背景图片,浅谈win7系统中电脑开机的背景图片修改方法
在操作电脑中无奇不有,为了让电脑变得更有个性,特别用户就想改掉原有的经典的WINDOWS开机背景,换上自己喜欢的开机背景图片,在win7系统下对于怎么设置这个过程,下面豆豆来详细介绍下修改方法. 浅谈 ...
用css控制背景图片的位置，大小
引用连接:http://hi.baidu.com/dengdan1025/blog/item/c3463bfba4c3969158ee90d5.html 对于图片,首先我们先想到是背景图片.因为我们许 ...
JS——修改背景图片
问题描述使用JS修改元素的背景图片解决方法 1 使用 css() 给元素添加背景图片这种方法添加的样式优先级相当于行内样式,会覆盖掉优先级比他低的样式代码如下: $("css选择器& ...
05 react img css修改svg图片样式
react img css修改svg图片样式 svg图片的相关理论定义优点前端引入svg图片的方式方式一:<svg>标签引入,内嵌到 HTML 中方式二,修改svg的颜色方式三 ...
php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起 ...
vue动态设置style属性修改背景图片
原始class属性设置背景样式 .bannerP {position: absolute;top: 0;left: 2.96rem;right: 0;bottom: 0;background: url ...
php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
html 图片按钮,css按钮背景图片如何实现？（代码实例）
css按钮背景图片如何实现?相信有很多刚刚接触css的朋友都会有这样的疑问.本章就给大家介绍css按钮背景图片如何实现.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 很多人提交表单 ...

web中html+CSS修改背景图片的不透明度

web中html+CSS修改背景图片的不透明度相关推荐

最新文章

热门文章