[英]CSS background color and png image
它可能需要解決方法或要實現的其他元素,但無論如何我都會提出。
我有一個簡單的形象。 圖像被對角分為兩部分。 頂部是純色,底部是透明的。 如果我應用以下代碼,則背景色將填充圖像的透明度。 有沒有一種方法可以定位顏色或不通過我的圖像區域顯示顏色,而是僅填充元素的其余部分?
#content:before {
position: absolute;
z-index: -1;
bottom: -35px;
content: "";
width: 35px;
height: 465px;
left: -35px;
background: #121314 url(library/images/content-fold-left.png) 0 bottom no-repeat;
}
使用CSS3漸變:
html, body {
height: 100%;
}
body {
background: -webkit-gradient(linear, 50% 0%, 50% 100, color-stop(100%, rgba(0, 0, 0, 0)), color-stop(100%, #fa8072));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
background: linear-gradient(top, rgba(0, 0, 0, 0) 100px, #fa8072 100px);
}
這是一個演示 。
您會注意到我使用了Sass和Compass。 不同的漸變語法是一場噩夢,但是使用Sass和Compass,您所要做的就是:
body
+background(linear-gradient(top, rgba(0,0,0,0) 100px, salmon 100px))
它將為您編譯所有供應商前綴和不同的舊語法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.