Css 背景图像水垢

我试图使用SVG/PNG图像作为div的背景。 我希望这个简单的图像以一种特殊的方式显示。几天来我一直在寻找解决这个问题的方法，我不确定是否有可能做到这一点

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

以下是我仅尝试使用CSS操作所做的：

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

有人有主意吗

---

谢谢

可以通过以下方式实现：

html:

---

工作

这可能会帮助你找到正确的方向

基本上，我通过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>

我的努力是：

文本
文本
文本
文本
文本
.世界{
颜色：#FFF；
填充：30px；
利润率：10px0；
背景色：#999；
背景图像：url（“http://imgur.com/fgvayKi.png");
背景位置：右上角；
背景重复：无重复；
}
.blue{背景色：#336}
.green{背景色：橄榄色}
.red{背景色：#933}
.黄色{背景色：金色}
.orange{背景色：darkorange}

谢谢！通过一点javascript，我使它变得灵活：）

.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);
}

<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>

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;}

<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 }