1

原来我的 CSS 是，

  .featured .content-wrapper
  {
   background-color: #7ac0da;
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);

    color: #3e5667;
    padding: 20px 40px 30px 40px;
   }

显示喜欢： 旧图像

然后我想添加一张图片，CSS变成了：

   .featured .content-wrapper
   {
     background-color: #7ac0da;
     background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
     background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
     background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
     background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
     background-image: url('../Images/love.png');
     color: #3e5667;
     padding: 20px 40px 30px 40px;
   }

我只添加了一张图片

背景图像： url('../Images/love.png');

现在它显示： 新图片

我想要的是使背景颜色#3e5667 仍然可见。

如何修改CSS？

4

3 回答 3

4

您可以像这样在 CSS3 中同时定义背景图像和渐变：

background: #7ac0da;
background-image: url('../Images/love.png'); /* fallback */
background-image: url('../Images/love.png'), -webkit-gradient(linear, left top, left bottom, from(#7ac0da), to(#999999)); /* Saf4+, Chrome */
background-image: url('../Images/love.png'), -webkit-linear-gradient(top, #7ac0da , #a4d4e6 ); /* Chrome 10+, Saf5.1+ */
background-image: url('../Images/love.png'), -moz-linear-gradient(top, #7ac0da , #a4d4e6 ); /* FF3.6+ */
background-image: url('../Images/love.png'), -ms-linear-gradient(top, #7ac0da , #a4d4e6 ); /* IE10 */
background-image: url('../Images/love.png'), -o-linear-gradient(top, #7ac0da , #a4d4e6 ); /* Opera 11.10+ */
background-image: url('../Images/love.png'), linear-gradient(top, #7ac0da , #a4d4e6 ); /* W3C */
于 2013-06-07T14:33:00.563 回答
1

这只是因为你用图像覆盖了 bg。我建议要么在你的 HTML 中创建一个包装器，要么使用 CSS psudo-element 来补偿。

.featured .content-wrapper
{
   background-color: #7ac0da;
   background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
   background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
   background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
   color: #3e5667;
   padding: 20px 40px 30px 40px;

   position:relative;
}

.featured .content-wrapper:after
{
   content: '';
   position:absolute;
   background-image: url('../Images/love.png');
   width:100%;
   height:100%;
   left:0%;
   top:0%;
}

或类似的东西。请注意，这不适用于所有版本的 IE，当然要确保图像上的背景是完全透明的。

于 2013-06-07T14:31:44.027 回答
1

您需要确保您的图像 (love.png) 具有透明背景。目前它有一个深灰色的背景，并且显示在您在 CSS 中添加的蓝色背景的顶部。

你可以试试

background-repeat:no-repeat;
background-position:center center;

你是这个意思吗？

于 2013-06-07T14:27:41.450 回答