2013-12-22 122 views
0

如何更改背景图片的不透明度以及仅背景?我不希望页面上的任何内容改变。背景图片CSS中的不透明度

我的CSS代码:

html {background: url(http://fc04.deviantart.net/fs28/f/2008/131/2/7/Crumpled_white_paper_texture_by_melemel.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;} 
+0

如果你只是想改变背景的不透明度,你可以简单地改变透明度使用图像编辑器的图像,它可能会更容易,更清晰 – Sugar

+0

一个互联网搜索'背景CSS不透明',我找到一个css-tricks.com解决方案。 – Harald

回答

0

试试这个:

html { 
    position: relative; 
    height: 100%; 
} 

html:before { 
    content: ''; 
    background: url(http://fc04.deviantart.net/fs28/f/2008/131/2/7/Crumpled_white_paper_texture_by_melemel.jpg); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    opacity: 0.8; 
} 

Demo

+0

谢谢!这一个工作!你会好心解释一下编码吗?我是一个网页设计新手。我想了解编码,而不是只是一直拷贝和粘贴代码。 –

+0

@ user3123883有许多关于它的优秀文章,请参阅:http://www.hongkiat.com/blog/pseudo-element-before-after/,http://css-tricks.com/pseudo-element-roundup/ ,http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-o-lements-in-practice – Tony

0

你不应该使用CSS改变图像,更好的操作画面用编辑器

进一步你不能这样做的背景,因为不透明度仅适用于HTML元素像<img>,因为它的css属性不会影响其他属性,如background

,所以我认为你必须改变整个身体