css 背景图片
时间: 2023-07-23 11:14:20 浏览: 44
要设置CSS背景图片,可以使用background-image属性。例如,如果要将名为image.jpg的图片设置为背景,可以使用以下代码:
```css
body {
background-image: url('image.jpg');
}
```
请注意,url()函数中的图片路径应该是相对于CSS文件的路径。如果图片文件与CSS文件位于同一目录下,可以直接使用文件名;否则,应该使用相对路径或绝对路径。
相关问题
css网页背景图片自适应
CSS实现网页背景图片自适应全屏的方法有多种,以下是其中一种方法:
```css
body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
```
这段CSS代码将背景图片设置为全屏自适应,并且在图片加载过程中显示背景色。其中,`background-image`属性用于加载背景图,`background-position`属性用于设置背景图的位置居中,`background-repeat`属性设置背景图不平铺,`background-attachment`属性设置背景图相对于viewport固定,`background-size`属性用于让背景图基于容器大小伸缩,`background-color`属性设置背景色。
css实现背景图片淡入
以下是使用CSS实现背景图片淡入的步骤:
1. 首先,在HTML文件中创建一个容器元素,例如div,并设置其宽度、高度和背景颜色。
2. 在CSS文件中,为容器元素设置背景图片,并将其透明度设置为0。
3. 使用CSS3的transition属性为容器元素的透明度添加过渡效果。
4. 使用JavaScript或者jQuery等技术,当页面加载完成后,通过修改容器元素的透明度来触发背景图片的淡入效果。
以下是一个示例代码:
HTML代码:
```html
<div id="bg-container"></div>
```
CSS代码:
```css
#bg-container {
width: 100%;
height: 100%;
background-image: url('your-image-url'); background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
```
JavaScript代码:
```javascript
window.onload = function() {
document.getElementById('bg-container').style.opacity = 1;
}
```