<button>背景图片

我在为背景图片<button>设置了一个小问题。<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; 
}

我不知道为什么按钮的背景仍然是白色的。

来源

2013-03-17 Kyrbi

令人吃惊的是没有答案的地址或在这里提到的实际问题。

CSS选择button #rock说： “给我一个元素与ID rock内一个<button>元素”，像这样：

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

但你想要的是一个<button>元素与的ID rock 。并且选择器为button#rock（注意按钮和#rock之间的缺失空间）。

而@Greg已经提到：#rock已经足够专门用于定位按钮并且可以独立使用。

来源

2014-06-19 12:45:13 maryisdead

试着改变你的CSS这个

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

...提供的图像是在那个地方

来源

2013-03-17 13:37:28

难道它风格化它。仍然是白色。：/ – Kyrbi 2013-03-17 13:38:45

我编辑你的答案来纠正选择器。按钮和ID之间不应有空格。 – isherwood 2013-03-17 13:40:55

我也尝试了完整的url来映像http：//miracz.....img/rock.png – Kyrbi 2013-03-17 13:42:06

对于一些奇怪的原因，该按钮已被重置的宽度和高度。您还需要在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; 
}

Live test case。

来源

2013-03-17 13:40:53

删除 “按钮” ＃岩石前：

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

谷歌浏览器为我工作。

来源

2013-03-17 13:42:10

更换按钮#rock 随着 #rock

无需额外的选择范围。你正在使用一个特定的ID，因为你可以。

JsBin例如：http://jsbin.com/idobar/1/edit

来源

2013-03-17 13:42:19 Greg

你需要调用类的按钮

<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>

来源

2013-03-17 13:52:26 Tom

ID有什么不好？ – Kyrbi 2013-03-17 13:54:15

给id和按钮是复杂的，类也可以用于其他按钮 – Tom 2013-03-17 18:10:51

-1

尝试这种方式

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

来源

2016-11-24 08:50:33

为了摆脱白色的你的背景色设置为透明：

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

来源

2017-05-23 17:50:50 tourdefran

-1

只是要与左，右箭头的图像按钮。为图像添加onclick功能。

E.g. 这是你的HTML代码：

<img src="url of your button's image" id="previmg" onclick="prev()"> 

<img src="E:\Приложении\Программирование\Мои сайты\Example\images\right_1.png" id="nextimg" onclick="next()"> 

<script> 
var images = [ 
    'image url 1', 
    'image url 2', 
    'image url 3' 
]; 
var num = 0; 
function next() { 
    var slider = document.getElementById('slider'); 
    num++; 
    if(num >= images.length) { 
     num = 0; 
    } 
    slider.src = images[num]; 
} 
function prev() { 
    var slider = document.getElementById('slider'); 
    num--; 
    if(num < 0) { 
     num = images.length-1; 
    } 
    slider.src = images[num]; 
} 
</script>

由您自行决定

来源

2018-03-04 17:28:34 Bakhrom

<button>背景图片

回答

相关问题