0

最終結果は次のようになります。 Button Comp

画像が削除された私のボタンは、放射状グラデーションを完全に正しく表示します（コンテナを完全に埋めます）。画像を HTML に追加すると、グラデーションが失われます。

画像は (上から) 約 135 ピクセルしか占有せず、コンテナーの下部に約 70 ピクセルを残します。この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;
}`
4

1 に答える 1

0

背景:hoverプロパティがボタンの背景プロパティを上書きしています。:hoverセレクターはより具体的であるため、これは CSS の予想される動作です。代わりに必要なのは、背景のプロパティを 1 つのステートメントに結合することです。これは複数の背景と呼ばれ、ブラウザーで十分にサポートされています。

代わりに次の CSS を試してください。

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

フィドルの例

背景画像は、最初の画像が一番上に、最後の画像が一番下になるように積み重ねられます。背景画像の重ね順の詳細

于 2013-09-07T05:29:41.920 に答える