css無圖像透明覆蓋

我想創建像使用CSS僅附加圖像。到現在爲止我已經來了，趕上了：css無圖像透明覆蓋

.block5-header:after { 
    content:""; 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    width:100%; 
    background: url({template_relativeimagepath}{template_imagesfolder}blocks/elipsa.png) no-repeat; 
    background-size: contain; 
}

但是這種解決方案需要使用很多不同的PNG圖片，因爲我有頭塊的許多不同的大小。我曾嘗試使用具有徑向漸變的僞元素，但無濟於事。如果有一些簡單的解決方案，請讓我知道;）

我想實現的圖片。 http://i.imgur.com/pwN54o1.png

來源

2013-10-24 toHo

鏈接不工作 – Nitesh

您能否更新鏈接？ – mithataydogmus

試試這一個： http://image.bayimg.com/496b2125d3e39f389a3ed066d01c2fb3b1ce510f.jpg – toHo

好吧，我用CSS position，circles和rgba。

Pure CSS Solution（固定寬度）

It is also responsive to width changes

HTML

<header class="subNav"> 
    <span class="headCirc"></span> 
    Something 
</header>

CSS

.subNav { 
    width: 285px; 
    height: 60px; 
    overflow: hidden; 
    background: #4679bd; 
    display: block; 
    position: relative; 
    left: 30px; 
    top: 30px; 
    line-height: 60px; 
    font-size: 20px; 
    color: #fff; 
    padding-left: 15px; 
    border-radius: 10px 10px 0 0; 
} 

.headCirc { 
    position: absolute; 
    top: -30px; 
    left: -5%; 
    display: block; 
    width: 110%; 
    height: 70px; 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 50%; 
}

我所做的就是將圓圈完全放在標題內，然後我給標題overflow: hidden以隱藏盒子中出現的任何圓圈。

來源

2013-10-24 13:52:30

非常感謝你！這是天才。 – toHo

非常歡迎您！祝你好運，我很高興能夠幫助你。 –

你不會能夠得到的曲線，但如果你不介意的話，你可以嘗試http://www.colorzilla.com/gradient-editor/

來源

2013-10-24 13:40:17 jeff

是否有任何其他方式的縮放背景透明PNG圖像？例如只縮放寬度並保持高度相同？ – toHo

在CSS中 - 設置高度爲％或em，也許。 – jeff

css無圖像透明覆蓋

回答

相關問題