更浅的背景图像CSS3

-1

我想要一个背景图像一帧，但我需要使图像更轻。我尝试过使用不透明度，但是接下来从另一帧中获得的背景图片会闪耀其中。我在同一个框架中也有一些文字，我不希望文字变浅。更浅的背景图像CSS3

我用CSS3编写，这是我的代码;

 .frameContent 
    { 
     background-image: url(/image/and_02.jpg); 
     background-size: 100%; 
     vertical-align: top; 
     border-left: #FFFFFF 20px solid; 
     border-right: #FFFFFF 20px solid; 
     border-top: #FFFFFF 15px solid; 
     padding: 25px 10px 10px 10px; 
     height:100%; 
     box-shadow: 2px 2px 2px; 
    }

来源

2013-07-01 user2538267

你可以发布html来清楚你需要哪个框架的减轻图像？ – acutesoftware

如何创建嵌套元素？

.frame = Plain white; .frameContent =您的部分透明的背景

<div class="frame"><div class="frameContent">My Content here</div></div>

来源

2013-07-01 08:26:56

添加以下CSS到您的类（）

.frameContent 
    { 
     background-image: url(/image/and_02.jpg); 
     background-size: 100%; 
     vertical-align: top; 
     border-left: #FFFFFF 20px solid; 
     border-right: #FFFFFF 20px solid; 
     border-top: #FFFFFF 15px solid; 
     padding: 25px 10px 10px 10px; 
     height:100%; 
     box-shadow: 2px 2px 2px; 
     opacity: 0.2; 
     filter: alpha(opacity=20); 
    }

，并检查它是否适合你。您还可以查看以下链接供你参考

http://css-tricks.com/snippets/css/transparent-background-images/ http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html

来源

2013-07-01 08:33:12

这样做是为了容器元素：

yourImageContainer:after { 
    content: ""; 
    position: fixed; 
    top: 0; bottom: 0; left: 0; right: 0; 
    background: hsla(180,0%,50%,0.25); 
    pointer-events: none; 
}

这将使取决于你选择什么颜色较暗/更轻的面具。

来源

2017-04-11 09:00:11

更浅的背景图像CSS3

回答

相关问题