Question

我正在尝试使用SVG / PNG图像作为div的背景。我希望这个简单的图像以特定的方式显示。我已经在几天内寻求解决这个问题的方法了，我不确定是否有可能实现这一目标。

基本上，这是我的SVG（或PNG）图像：

https://i.imgur.com/ebEevH6.png

这就是我只想用CSS操作的方法：

https://i.imgur.com/fE0pmC0.png

问题是我的div的背景颜色可以改变，所以我不能只修改SVG使其变红。如果我的div为蓝色，则背景图像必须为蓝色且具有相同的视觉效果。我想要走的路是用我的div屏蔽图像并应用过滤器，但我的所有尝试都失败了。

有没有人有想法？

谢谢

Answer 1

可以通过以下方式实现：

HTML：

<div class="myDiv">
    <div class="semitrans_red">
    <p class="title">text big</p>
    <p class="subtitle">text not so big</p>
    </div>
</div>

的CSS：

.myDiv
{ 
    position:relative;
    border:1px solid black;
    width: 300px;
    height: 150px;
    padding:0px;
    background-image:url('https://i.imgur.com/ebEevH6.png');
    background-repeat:no-repeat;
    background-position:150% 10%; 
}
.myDiv p.title
{
    color: white;
    margin-left:30px;
    font-size:14pt;
}

.myDiv p.subtitle
{
    color: white;
    margin-left:30px;
    font-size:10pt;
}

.semitrans_red{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(255,0,0,0.5);
}

工作Fiddle demo

Answer 2

这可能有助于您朝着正确的方向前进

http://jsfiddle.net/social_quotient/69Khw/2/

enter image description here

基本上我通过css将图像设置为背景，然后设置一些红色的背景颜色。接下来，我为您创建了一个内容类，以便将半透明叠加层应用于。

看起来像这样

<div class="container">
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">Testing background image</div>
            <div class="panel-body">
                <div class="example">
                <div class="overlay">
                    <h1>Text text text</h1>
                    <p>testing text here is fun</p>
                </div>
                </div>
            </div>
            <div class="panel-footer">
            </div>
        </div>
    </div>
</div>

然后是CSS - 我只在需要更复杂的叠加时才使用渐变，这样您以后就不需要弄清楚了。

body{color:#fff;}
.overlay{
height:150px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxM2IzYiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2QxM2IzYiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(209,59,59,0.9) 0%, rgba(209,59,59,0.9) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,59,59,0.9)), color-stop(100%,rgba(209,59,59,0.9))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(209,59,59,0.9) 0%,rgba(209,59,59,0.9) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(209,59,59,0.9) 0%,rgba(209,59,59,0.9) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(209,59,59,0.9) 0%,rgba(209,59,59,0.9) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(209,59,59,0.9) 0%,rgba(209,59,59,0.9) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6d13b3b', endColorstr='#e6d13b3b',GradientType=0 ); /* IE6-8 */

}

.example{
background-color:#bb1f1f;
background-image:url('https://i.imgur.com/ebEevH6.png');
background-position:right top;
background-repeat:no-repeat;}

Answer 3

我的尝试是：http://jsfiddle.net/t9Xgr/

<div class="world blue">text</div>
<div class="world green">text</div>
<div class="world red">text</div>
<div class="world yellow">text</div>
<div class="world orange">text</div>

.world {
    color: #FFF;
    padding: 30px;
    margin: 10px 0;
    background-color: #999;
    background-image: url("http://imgur.com/fgvayKi.png");
    background-position: top right;
    background-repeat: no-repeat;
}

.blue { background-color: #336 }
.green { background-color: olive }
.red { background-color: #933 }
.yellow { background-color: gold }
.orange { background-color: darkorange }

背景图像结壳

3 个答案: