|
|
@@ -0,0 +1,48 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box{
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ border:3px solid black;
|
|
|
+ /* 设置背景图片 */
|
|
|
+ /* 背景图片默认为原始尺寸 */
|
|
|
+ /* 如果图片不能把元素完全覆盖 默认情况下，背景图片会重复出现 直到铺满整个元素 */
|
|
|
+ /* background-image: url("./img/baidu/wen.png"); */
|
|
|
+ background-image: url("./img/img1.jpg");
|
|
|
+ /* 背景图片尺寸 */
|
|
|
+ /* 背景图片尺寸 可以设置为 宽度 高度 */
|
|
|
+ /* background-size: 400px 400px; */
|
|
|
+ /* background-size: 100% 100%; */
|
|
|
+ /* cover 会缩放背景图片 以完全覆盖元素 图片会有溢出情况 溢出部分会被截取掉 */
|
|
|
+ /* background-size: cover; */
|
|
|
+ /* contain 会缩放背景图片 以完全装入元素 图片不会有溢出情况 */
|
|
|
+ background-size: contain;
|
|
|
+ /* 背景图片重复 */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ /* 背景图片位置 */
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+ .box1{
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ border: 3px solid black;
|
|
|
+ background-image: url("./img/baidu/wen.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ /* 背景图片位置 两个值 第一个值 水平方向 第二个值 垂直方向 */
|
|
|
+ /* background-position: right bottom; */
|
|
|
+ /* background-position: center center; */
|
|
|
+ background-position: 100px 50px;
|
|
|
+
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box"></div>
|
|
|
+ <div class="box1"></div>
|
|
|
+</body>
|
|
|
+</html>
|
