将图像设置为背景

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>

将图像设置为背景

set img as background

html

css

background-image