更淺的背景圖像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

回答

相關問題