Question

最终结果应如下所示： Button Comp

我的按钮，删除了图像，正确显示我的径向渐变（完全填满容器）。一旦我将图像添加到HTML，我的渐变就会丢失。

图像仅占据135px（从顶部开始），在容器底部留下约70px。我希望渐变显示在这个70px区域内。出于某种原因，此区域显示为白色背景。

基本上假设我有一个高度为500px的容器，并且完全填充了径向渐变。我放置一个图像并将其定位在中心，顶部。图像的高度为250px。容器应在上半部分显示图像，在下半部分显示渐变。这是遥不可及的还是什么？

注意：使用下面的这些类，.sm和.lg仅适用于根据页面上的按钮数量更改按钮大小。

这是我的按钮HTML：

`<a href="#"><div class="imgButton <?php echo $buttonSizeClass; ?>" style="background:transparent url(<?php echo $answer["image"]; ?>) no-repeat; background-size: 100% auto;"><label><input type="checkbox" value="<?php echo implode(",",$answer["keys"]); ?>" /><?php echo $answer["label"]; ?></label></div></a>`

这是我的CSS：

`.expert-advice .imgButton input[type=checkbox] {display:none;}

.expert-advice .imgButton {
    background-size: cover; 
    background-origin: content-box;
    background-position: top left;  
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-color: transparent !important;
    border:1px solid #e3e3e3;
    text-align: center;             
    color:#ff6600;  
    display:inline-block;       
    position: relative;
    overflow: hidden;
    margin-right: 15px;
}

.expert-advice .imgButton.sm {
    width: 106px; 
    height: 98px;   
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;  
    font-size:.8em !important; 
}

.expert-advice .imgButton.lg {
    width: 205px; 
    height: 188px; 
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px; 
    font-size:1.0em !important;
}

.expert-advice .imgButton label {
    width: 100%; 
    height:auto; 
    position: absolute; 
    display:block; 
    top:80%;
}

.expert-advice .imgButton:hover {   
    background-color: #fcf1cc;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y5YzYzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 30%, #f9c636 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(30%,#ffffff), color-stop(100%,#f9c636)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 30%,#f9c636 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 30%,#f9c636 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 30%,#f9c636 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #ffffff 30%,#f9c636 100%); /* W3C */
    -moz-box-shadow: 0px 1px 18px -8px #000000;
    -webkit-box-shadow: 0px 1px 18px -8px #000000;
    box-shadow: 0px 1px 18px -8px #000000;

    border:1px solid #f8bf1f;
}`

Answer 1

您的:hover背景属性覆盖您的按钮背景属性。这是CSS的预期行为，因为:hover选择器更具体。你需要的是将背景属性组合成一个语句。这称为多个背景，它是well supported by browsers。

请尝试使用此CSS：

.imgButton:hover {
    background-image: url(http://www.danalydesign.com/finding-time.jpg), radial-gradient(ellipse at center,  #ffffff 30%,#f9c636 100%);
}

Example Fiddle

背景图像堆叠在一起，第一张图像位于顶部，最后一张图像位于底部。 more on background image stacking order

CSS按钮：100％渐变填充div，图像覆盖仅覆盖上半部分

1 个答案: