blocks|key|138159|text|尝试将您的CSS更改为以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138160|button+#rock+{
++++background:+url('img/rock.png')+no-repeat;
}|code-block|syntax|javascript|138161|...provided表示图像在该位置|138162|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try changing your CSS to this </p>

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

<p>...provided that the image is in that place</p>


blocks|key|138206|text|由于一些奇怪的原因，按钮的宽度和高度都被重新设置了。您还需要在ID选择器中指定它们：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138207|#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;
}|code-block|syntax|javascript|138208|Live+test+case。|offset|length|138209|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/NnXex/1/^0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>For some odd reason, the width and height of the button have been reset. You need to specify them in the ID selector as well:</p>

<pre><code>#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;
}
</code></pre>

<p><a href="http://jsfiddle.net/NnXex/1/">Live test case</a>.</p>


blocks|key|138232|text|删除#rock前的"button“：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138233|button+#rock+{
++++background:+url(img/rock.png)+no-repeat;
}+|code-block|syntax|javascript|138234|在Google+Chrome中对我很有用。|138235|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Delete "button" before # rock:</p>

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

<p>Worked for me in Google Chrome.</p>


blocks|key|138283|text|将#rock按钮替换为#rock|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138284|不需要额外的选择器范围。您正在使用一个尽可能具体的id。|138285|JsBin示例：http://jsbin.com/idobar/1/edit|offset|length|138286|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/idobar/1/edit^0|0|0|8|U|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>Replace
    button #rock
With
    #rock</p>

<p>No need for additional selector scope. You're using an id which is as specific as you can be. </p>

<p>JsBin example: <a href="http://jsbin.com/idobar/1/edit" rel="nofollow">http://jsbin.com/idobar/1/edit</a></p>


blocks|key|356092|text|你需要在按钮中调用CLASS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356093|<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>|code-block|syntax|javascript|356094|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You need to call CLASS in button</p>

<pre><code>&lt;button class="tim" id="rock" onClick="choose(1)"&gt;Rock&lt;/button&gt;



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


blocks|key|138317|text|试试这条路|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138318|<button>+
++++<img+height="100%25"+src="images/s.png"/>
</button>|code-block|syntax|javascript|138319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this way </p>

<pre><code>&lt;button&gt; 
    &lt;img height="100%" src="images/s.png"/&gt;
&lt;/button&gt;
</code></pre>


blocks|key|138363|text|要去掉白色，你必须将背景颜色设置为透明：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138364|button+{
++font-size:+18px;
++border:+2px+solid+#AD235E;
++border-radius:+100px;
++width:+150px;
++height:+150px;
++background-color:+transparent;+/*+like+this+*/
}|code-block|syntax|javascript|138365|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To get rid of the white color you have to set the background-color to transparent:</p>

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


blocks|key|138405|text|你真的需要一个按钮标签元素吗？因为您可以改为使用输入按钮“type=”元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138406|然后只需链接这个CSS：|138407|​|138408|++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;
}|code-block|syntax|javascript|138409|<input+type="button"/>|138410|138411|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You absolutely need a button tag element?
because you can use instead an input type=&quot;button&quot; element.</p>
<p>Then just link this CSS:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>  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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button"/&gt;</code></pre>
</div>
</div>
</p>


<p>I have got a little problem with setting a background image for <code>&lt;button&gt;</code>.</p>

<p>Here is the html I have got on site:</p>

<pre><code> &lt;button id="rock" onClick="choose(1)"&gt;Rock&lt;/button&gt;
</code></pre>

<p>And here is the CSS:</p>

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

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

<p>I don't know why the button's background is still white.</p>


<button> background image

我在为<button>设置背景图片时遇到了一点小问题。这是我在网站上得到的html： <button id="rock" onClick="choose(1)">Rock</button>下面是CSS：button {   font-size: 18px;   border: 2px solid #AD235E;   ...

问<button>背景图像
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<button>背景图像EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<button>背景图像
EN