CSS 中如何插入图片? 下面本篇文章就来给大家介绍一下使用 CSS 在 html 中插入图片的方法, 希望对大家有所帮助.
在 CSS 中, 可以使用 background-image 属性添加图片. background-image 属性为元素设置背景图像. 初始背景图像 (原图像) 根据 background-position 属性的值放置.
元素的背景占据了元素的全部尺寸, 包括内边距和边框, 但不包括外边距. 默认地, 背景图像位于元素的左上角, 并在水平和垂直方向上重复.
提示: 请设置一种可用的背景颜色, 这样的话, 假如背景图像不可用, 页面也可获得良好的视觉效果.
详细说明
background-image 属性会在元素的背景中设置一个图像. 根据 background-repeat 属性的值, 图像可以无限平铺, 沿着某个轴 (x 轴或 y 轴) 平铺, 或者根本不平铺.
初始背景图像 (原图像) 根据 background-position 属性的值放置.
属性值:
url('URL') 指向图像的路径.
none 默认值. 不显示背景图像.
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style type="text/css">
- div{ width: 400px; height: 300px; border: 1px solid red; } .img1{ background-image:
- url(1.jpg); background-size: 200px; }
- </style>
- </head>
- <body>
- <div class="img1">
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/12867.html