Question

我的CSS要求在a：hover上更改我想要更改的背景图像。该类在字体颜色变化时工作正常，但我无法将图像显示在任何地方。

<ul class="qualities_cycle">
<a href="http://spielconsulting.com/qualities/transition/" class="cyclehover">
<li class="grid_4"> 
   <div class="title-wrap">
          <h3>Partnership Transition</h3>
       </div>
   <h5>Lorem ipsum dolor sit amet consec</h5>
       Seven out of ten Associateships fail - a devastating statistic. Spiel Consulting, however, sees tremendous success with Associateships...
</li>
</a>
</ul>

这是CSS

.qualities_cycle {
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
.qualities_cycle li {
    padding:0;
    background:none;
    border:none;
    line-height:22px;
    }
    .qualities_cycle li .title-wrap {
        position:relative;
        padding:0 90px 0 60px;
        }
        .qualities_cycle li .icon {
            position:absolute;
            left:0;
            top:0;
            }
        .qualities_cycle li .title-wrap h3 {
            font-weight:normal;
            }
        .qualities_cycle li .title-wrap h3 a {
            color:#0f0f0f;
            text-decoration:none;
            }
        .qualities_cycle li .title-wrap h3 a:hover {
            color:#80B34C;
            }
.grid_4 {
display:inline;
float: left;
position: relative;
padding: 19px 9px !important;
}

a.cyclehover {
color:#0F0F0F; 
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}

a.cyclehover:hover {
color: #4C739B;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon2.gif") no-repeat scroll 0 0 transparent;
}

jsfiddle链接是here

我正在尝试获取三列，这就是我所拥有的，但图像没有出现：

Answer 1

只需更改与 a.cyclehover

相关的CSS即可

a.cyclehover {
color: #0F0F0F;
background-image: url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif");
display: block;
float: left;
background-repeat: repeat;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
transition: color .2s ease-out, background 1s ease-in;
}

Answer 2

快速浏览一下后，我在您的页面中发现了这些问题：

您正在使用background-image CSS属性，就好像它是background。
在<div>中包含的<a>内，您有浮动元素，这些元素被视为在您网页中的正常元素流之外，因此您的<div>结束高度为空：您可以通过将overflow: hidden;样式添加到<div>来“修复”此问题。
您不应将块元素（例如<div>）放在<a>内，这不是有效的HTML。
您尝试将CSS转换应用于background属性，但background不可动画：http://www.w3.org/TR/css3-transitions/#animatable-properties

简而言之：重写页面，遵循一些好的文档并使用W3C Markup Validator。

Answer 3

我没有仔细研究你的代码，但是你错误地使用了背景属性。

基本上，改变这个：

background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;

到此：

background:url(http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif) no-repeat 0 0;

检查它是否有效......如果是，你可以添加“scroll”属性，如果真的有必要的话。我甚至不知道那个“透明”的东西是什么......背景在默认情况下是透明的，所以它不应该是必要的。如果您需要应用其他背景颜色，请在url（）...

之前执行此操作

顺便说一句，这就是你应该如何'思考'CSS中的背景缩写（至少是我如何使用它们）：

background: color url() repeat fixed left top;

这样：

background: #000 url(imgs/logo.png) no-repeat scroll 0 0;

在示例中，您可以使用透明而不是＃000颜色，但同样，它是默认颜色。但是如果您有其他规则设置颜色并且希望它是透明的，请使用它。

还要记住，背景只能应用于“块”元素。如果您的元素不是块元素，请将其设置为，例如：display：block;或显示：inline-block;设置一个宽度和一个高度，你应该很高兴。

css背景图片不会显示

3 个答案: