最终结果应如下所示: Button Comp
我的按钮,删除了图像,正确地完美地显示了我的径向渐变(完全填满了容器)。一旦我将图像添加到 HTML,我的渐变就会丢失。
图像仅占用约 135 像素(从顶部开始),在容器底部留下约 70 像素。我希望渐变显示在这个 70px 区域内。由于某种原因,该区域显示为白色背景。
基本上假设我有一个高度为 500 像素的容器,并且完全填充了径向渐变。我放置一个图像并将其定位在顶部的中心。图像的高度为 250 像素。容器应在上半部分显示图像,在下半部分显示渐变。这是牵强附会还是什么?
注意:对于下面的这些类,.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;
}`