html中图片出现方式设置6

HTML中的图片出现方式可以通过CSS来进行设置。图片出现方式常常使用的是background属性，其值可以为url()或者none。下面详细介绍6种不同的图片出现方式：

img {
  display: block;
  margin: 0 auto;
}

/* 居中显示 */

此样式可以将图片居中显示，并将图片作为块级元素展示。

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* 自适应宽度 */

此样式同样可以将图片居中显示，而且还可以随着浏览器窗口的缩放而自动适应图片宽度。

img {
  float: left;
  margin: 0 1em 1em 0;
}

/* 左浮动 */

此样式可以将图片向左浮动，使图片与文字左对齐，右边留出文字所占的空间。

img {
  float: right;
  margin: 0 0 1em 1em;
}

/* 右浮动 */

此样式可以将图片向右浮动，使图片与文字右对齐，左边留出文字所占的空间。

div {
  background: url("image.jpg") no-repeat;
  width: 500px;
  height: 300px;
}

/* 背景图片 */

此样式可以将图片作为背景，设置背景图片的大小和位置。

img {
  display: none;
}

/* 隐藏图片 */

此样式可以将图片隐藏，但仍然占据空间，对于一些需要在特定条件下才显示的图片非常有用。