CSS3：before - あなたは網膜画像を使用できますか？

Question

これを使用して配置した画像のサイズを変更することはできますか？

つまり、コンテンツxの後に網膜画像を使用したい場合はどうすればいいですか？

.buy_tickets_btn:before{ 
     content:url(../images/buttons/pink_ticket_btn_bg.png); 

Answer 1

あなたはいつもそれbackground-image作り、単にcontent: ""; width: 200px; height: 300px; display: inline-block;を設定することができます。

非網膜画像の寸法に合わせて寸法を調整します。

background-size: cover;を適用すると、網膜の画像が適切に縮小されます。使用する網膜像については

.buy_tickets_btn:before{ 
    background: url(../images/buttons/pink_ticket_btn_bg.png) no-repeat 0 0; 
    background-size: cover; 
    content: ""; 
    width: 200px; /* adjust to width of no-retina image */ 
    height: 300px; /* adjust to height of no-retina image */ 
    display: inline-block; 
} 

、単に関連するメディアクエリー（ここでは単にサンプルメディアクエリ）でファイル名を調整します。あなたができる場合は

@media screen and (min-resolution: 192dpi) { 
    .buy_tickets_btn:before{ 
    background-image: url(../images/buttons/pink_ticket_btn_bg_retina.png); 
    } 
} 

Answer 2

、と説得力がありません:beforeや:afterのような擬似要素を使用する理由は、background-sizeを100%またはcoverに設定してボタン要素自体に背景画像を設定します。

擬似要素を使用する必要がある場合は、その要素を配置してストレッチして、親要素と同じサイズにする必要があります。これは親にposition: relative;を設定し、position: absolute;を使用して位置プロパティをゼロ（top: 0;,right: 0;,bottom: 0;,left: 0;）に設定することによって行われます。これらのプロパティをゼロに設定すると、その要素を含む要素の境界に要素が引き伸ばされます。

以下に、2つの例を示します.1つは、通常の要素に背景を使用し、もう1つは擬似要素を使用します。

.btn, 
 
button { 
 
    width: 200px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    background-color: transparent; 
 
} 
 
button { 
 
    margin-top: 1rem; 
 
    border: 0; 
 
} 
 

 
.bg .btn, 
 
.bg button, 
 
.pseudo .btn:before, 
 
.pseudo button:before { 
 
    background-image: url('http://lorempixel.com/1200/400/city/1'); 
 
    background-size: 100%; 
 
} 
 

 
.pseudo .btn, 
 
.pseudo button { 
 
    position: relative; 
 
} 
 
.pseudo .btn:before, 
 
.pseudo button:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
}

<h2>Background Image</h2> 
 
<div class="bg"> 
 
    <div class="btn">Button</div> 
 
    <button type="button">Button</button> 
 
</div> 
 

 
<h2>Before Pseudo Element Background Image</h2> 
 
<div class="pseudo"> 
 
    <div class="btn">Button</div> 
 
    <button type="button">Button</button> 
 
</div>

私は、幅と高さを設定しているが、ボタンはその幅を決定している別の要素に含まれている場合、これは必要とされない場合があります。