HTML+css背景图片代码
时间: 2023-11-15 22:06:05 浏览: 38
HTML中使用CSS设置背景图片的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>背景图片</title>
<style>
body {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
```
其中,`background-image`属性指定背景图片的url,`background-repeat`属性指定背景图片是否重复显示,`background-size`属性指定背景图片的尺寸。
需要注意的是,url中的图片路径需要根据实际情况进行修改。
相关问题
html+css背景图片铺满
要让背景图片铺满整个页面,可以使用CSS的`background-size`属性,将值设置为`cover`即可。同时,将`background-repeat`属性的值设置为`no-repeat`,防止图片重复出现。
具体的CSS代码如下:
```css
body {
background-image: url('your-image-url.jpg');
background-size: cover;
background-repeat: no-repeat;
}
```
将`url('your-image-url.jpg')`替换为你自己的图片URL即可。
html+css3d地球代码
HTML和CSS3D地球代码是用来创建一个可以在浏览器中呈现3D地球的网页。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 800px;
height: 800px;
perspective: 1000px;
}
#earth {
width: 400px;
height: 400px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateY(30deg);
}
#earth .globe {
width: 100%;
height: 100%;
border-radius: 50%;
background-image: url('earth.jpg');
background-size: cover;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
#earth .marker {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transform: rotateY(-90deg);
}
#earth .marker span {
display: block;
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: -10px;
left: -10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container">
<div id="earth">
<div class="globe"></div>
<div class="marker" style="transform: rotateY(45deg);">
<span></span>
</div>
<div class="marker" style="transform: rotateY(-45deg);">
<span></span>
</div>
</div>
</div>
</body>
</html>
```
这段代码创建了一个带有3D地球效果的网页。在CSS中,使用`perspective`属性设置了视角的距离。`#earth`容器是地球的容器,使用`transform-style`属性设置为`preserve-3d`,`transform`属性用于控制地球的旋转角度。`.globe`类设置地球的样式,包括大小、背景图片等。`.marker`类用于标记地球上的位置,通过`transform`属性来控制位置的旋转角度。`.marker span`用于创建标记的小圆点。
通过上述代码,我们可以在浏览器中创建一个3D地球的效果,可以通过修改`transform`属性的值来改变地球的旋转角度。