html -

Question

の背景画像の設定に少し問題があります<button>。

これが私がサイトに持っているhtmlです：

 <button id="rock" onClick="choose(1)">Rock</button>

そしてここにCSSがあります：

button {
   font-size: 18px;
   border: 2px solid #AD235E;
   border-radius: 100px;
   width: 150px;
   height: 150px;
}

button #rock {
   background: url(img/rock.png) no-repeat;
}

ボタンの背景がまだ白いのはなぜかわかりません。

score 25 · Accepted Answer

ここで実際の問題に対処したり言及したりする答えがないのは驚くべきことです。

CSSセレクターには、次のように「要素内button #rockにIDを持つ要素を指定してください」と表示されます。rock <button>

<button>
    <span id="rock">This element is going to be affected.</span>
</button>

しかし、必要なのはidを持つ<button>要素です。そして、そのためのセレクターは次のようになります（ボタンと#rockの間にスペースがないことに注意してください）。rockbutton#rock

そして、@ Gregがすでに述べたよう#rockに、ボタンをターゲットにするのに十分なほど具体的であり、単独で使用することができます。

score 24 · Accepted Answer

奇妙な理由で、ボタンの幅と高さがリセットされました。IDセレクターでもそれらを指定する必要があります。

#rock {
    width: 150px;
    height: 150px;
    background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
    background-repeat: no-repeat;
}

ライブテストケース。

score 4 · Accepted Answer

ボタンでCLASSを呼び出す必要があります

<button class="tim" id="rock" onClick="choose(1)">Rock</button>



<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>

score 2 · Accepted Answer

ボタン#rockを#rockに置き換えます

追加のセレクタースコープは必要ありません。できるだけ具体的なIDを使用しています。

JsBinの例：http ：//jsbin.com/idobar/1/edit

score 0 · Accepted Answer

CSSをこれに変更してみてください

button #rock {
    background: url('img/rock.png') no-repeat;
}

...画像がその場所にある場合

score 0 · Accepted Answer

＃rockの前の「ボタン」を削除します。

button #rock {
    background: url(img/rock.png) no-repeat;
}

GoogleChromeで働いてくれました。

score 0 · Accepted Answer

白い色を取り除くには、background-colorをtransparentに設定する必要があります。

button {
  font-size: 18px;
  border: 2px solid #AD235E;
  border-radius: 100px;
  width: 150px;
  height: 150px;
  background-color: transparent; /* like this */
}

score 0 · Accepted Answer

ボタンタグ要素が絶対に必要ですか？代わりにinputtype="button"要素を使用できるためです。

次に、このCSSをリンクします。

  input[type="button"]{
  width:150px;
  height:150px;
  /*just this*/ background-image: url(https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 150px 150px;
}

<input type="button"/>

score -1 · Accepted Answer

-1

この方法を試してください

<button> 
    <img height="100%" src="images/s.png"/>
</button>

于 2016-11-24T08:50:33.337 に答える

html - 背景画像

9 に答える 9

Related

Reference

html -