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无图像透明覆盖

回答

相关问题