背景图片

最新推荐文章于 2023-08-01 16:28:58 发布

drunk喵咪

最新推荐文章于 2023-08-01 16:28:58 发布

阅读量2.5k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/jdrunk/article/details/108567296

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

设置背景图片，不拉伸图片，不重复

backgroundImage: 'url(' + require('@/assets/image/login-bg.jpg') + ')',
 backgroundRepeat: 'no-repeat'
 background-size: cover;
-webkit-background-size: cover;
 -o-background-size: cover;
background-position: center 0;

1、背景图片语法
background-image:url() 引入背景图片
background-repeat:no-repeat 设置背景图片是否重复平铺
background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上

简写背景图片语法：

background:url(图片地址) no-repeat left top

在这里插入图片描述

2、背景图片设置
Body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }
这里设置了图片“http://www.divcss5.com/img201301/divcss5-logo-2013.gif”作为网页背景不重复并靠上靠左显示。，

3、CSS背景图居中

横向居中：

background:url(图片地址) no-repeat center top

纵向居中：

background:url(图片地址) no-repeat left 50%

这里50%是随意设置考上为50%距离，细节具体上下垂直居中需要再通过百分比均衡设置。

4、div css背景图片居中
Css背景图片居中代码：

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center 0}

5、背景图片横向平铺

CSS背景X横向平铺代码：
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-x}

6、背景图片纵向平铺

CSS背景Y纵向平铺代码：

body{
	background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-y
}

8、全网页背景图片重复平铺

图片背景全屏网页重复平铺关键代码：

body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)}

说明：这里没有设置是否重复，是否居左居右，只设置背景引入图片即可简便地实现图片自然全屏平铺

二、CSS背景颜色 - TOP
1、background背景颜色语法

background:#FFF
.divcss5{background:#FFF}

设置了divcss5对象背景为白色

2、背景颜色案例

假如我们设置网页背景全部为白色，文字颜色为白色

1）、对应背景颜色CSS代码与HTML源代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
body{background:#000; color:#FFF} 
</style> 
</head> 
<body> 
DIVCSS5 背景为黑色；文字颜色为白色 
</body> 
</html>

2）、背景颜色与文字颜色案例截图

CSS背景颜色应用案例截图
CSS设置背景颜色与CSS字体颜色

如果想了解CSS背景颜色与CSS图片背景同时设置background基础进入：http://www.divcss5.com/rumen/r125.shtml

drunk喵咪

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
背景图片

1、背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图片是否重复平铺background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上简写背景图片语法：background:url(图片地址) no-repeat left top2、背景图片设置Body{background:url(http://www.divcss5.com/img201301/div
复制链接

扫一扫