[英]css background image transparent
原來我的CSS是
.featured .content-wrapper
{
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
color: #3e5667;
padding: 20px 40px 30px 40px;
}
顯示喜歡:
然后我想添加一個圖像,CSS變為:
.featured .content-wrapper
{
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: url('../Images/love.png');
color: #3e5667;
padding: 20px 40px 30px 40px;
}
我只添加了一張圖片
背景圖片:url('../ Images / love.png');
現在顯示:
我要使背景顏色#3e5667仍然可見。
如何修改CSS?
您可以在CSS3中同時定義背景圖片和漸變,如下所示:
background: #7ac0da;
background-image: url('../Images/love.png'); /* fallback */
background-image: url('../Images/love.png'), -webkit-gradient(linear, left top, left bottom, from(#7ac0da), to(#999999)); /* Saf4+, Chrome */
background-image: url('../Images/love.png'), -webkit-linear-gradient(top, #7ac0da , #a4d4e6 ); /* Chrome 10+, Saf5.1+ */
background-image: url('../Images/love.png'), -moz-linear-gradient(top, #7ac0da , #a4d4e6 ); /* FF3.6+ */
background-image: url('../Images/love.png'), -ms-linear-gradient(top, #7ac0da , #a4d4e6 ); /* IE10 */
background-image: url('../Images/love.png'), -o-linear-gradient(top, #7ac0da , #a4d4e6 ); /* Opera 11.10+ */
background-image: url('../Images/love.png'), linear-gradient(top, #7ac0da , #a4d4e6 ); /* W3C */
您需要確保圖像(love.png)具有透明背景。 目前,它具有深灰色背景,並顯示在您在CSS中添加的藍色背景的上方。
你可以試試
background-repeat:no-repeat;
background-position:center center;
你是這個意思嗎?
只是因為您要用圖像覆蓋bg。 我建議要么在HTML中創建包裝器,要么使用CSS偽元素進行補償。
.featured .content-wrapper
{
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
color: #3e5667;
padding: 20px 40px 30px 40px;
position:relative;
}
.featured .content-wrapper:after
{
content: '';
position:absolute;
background-image: url('../Images/love.png');
width:100%;
height:100%;
left:0%;
top:0%;
}
或類似的東西。 請注意,這不適用於所有版本的IE,當然要確保圖像的背景是完全透明的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.