将 IMG 设置为背景

Question

我想background知道如何使用

<img src="" alt="sample" width="480" height="500" border="0"> 

我知道我没有图像名称，这是因为我从下拉菜单中选择图像。 我的问题是如何集成即将显示为background image的代码。

这就是我需要将其集成到的内容。

.container {
background-color: lightgrey;
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
overflow: auto;
}

Answer 1

background属性不适用于img标签，因为img标签当然已经是使用图像src，所以如果你想应用一个background，那么使用一些元素，如div，在CSS中应用属性。

如果你想从下拉列表中选择它，你可以使用JS的类

$('select').change(function() {
$('.container').hide();
$('#' + $(this).val()).show();
})

body {
margin: 0
}
.container {
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
overflow: auto;
}
.red {
background: red
}
.green {
background: green
}
.blue {
background: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="opt1">red</option>
<option value="opt2">green</option>
<option value="opt3">blue</option>
</select>
<div id="opt1" class="container red"></div>
<div id="opt2" class="container green"></div>
<div id="opt3" class="container blue"></div>