Home / Questions / 125496
Accepted
omaza1990
Asked: 2020-12-19 01:23:25 +0800 CST 2020-12-19 01:23:25 +0800 CST

背景 HTML 背景图片

  • 772

我的网页有一个名为“fondo_campo1.jpg”的背景图像，我遇到的问题是在全尺寸显示图像时。

如果大小不大于屏幕分辨率的大小，则会重复图像。如果我把属性： background-repeat:no-repeat; 缺少的部分是空白的。

图片网址：https://previews.123rf.com/images/basketman23/basketman231110/basketman23111000294/11071349-house-in-green-field-landscape-with-blue-sky-File-Photo .jpg

我应该怎么办？

body{
  background-image: url("https://andro4all.com/files/2017/07/fondos-miui-9-700x618.jpg");
}
<!DOCTYPE html>
    <html lang="es">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>Reservar</title>
    		<link rel="stylesheet" href="css/estilos_reservar.css">
    	</head>
    	
    	<body>
    		//...
    	</body>
    </html>

html

2 Answers

  1. Best Answer

    尝试用这种方式在CSS中定义body

    body {font-family: 'Tinos', serif;

background-image: url("https://andro4all.com/files/2017/07/fondos-miui-9-700x618.jpg");
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

    background-attachment使背景图像不会随着页面的滚动而消失。

    其余属性特定于每个浏览器，不会导致问题或更常见的属性，这就是为什么我不会解释它们的作用

    • 4

  2. 您可以使用：

    background-repeat: no-repeat;
background-size: 100%;
background-position: center;

    任何一个background-size: cover;

    编辑：这样你得到你想要的：background-size: 100% 100%;

    div {
height: 100px;
width: 400px;
background-image: url("https://previews.123rf.com/images/basketman23/basketman231110/basketman23111000294/11071349-casa-en-el-paisaje-de-campo-verde-con-cielo-azul-Foto-de-archivo.jpg");
}

.imagen{
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
    <div class="imagen">
</div>

    • 2