首页 > 其他分享 >CSS篇十——(1)

CSS篇十——(1)

时间:2022-09-30 19:34:01浏览次数:65  
标签:平铺 repeat url 背景 CSS background 背景图片

一、CSS的背景

通过CSS背景属性,可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1. 背景颜色

background-color属性定义了元素的背景颜色。

1.1 使用方式

background-color: 颜色值|transparent(透明);

一般情况下元素背景颜色默认值是transparent(透明),也可以手动指定背景颜色为透明色。

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS背景之背景颜色</title>
<style>
div {
width: 300px;
height: 200px;
/* background-color: transparent; 透明的,清澈的 */
background-color: steelblue;
}
</style>
</head>

<body>
<div>

</div>
</body>

</html>

CSS篇十——(1)_背景图

2. 背景图片

background-image属性描述了元素的背景图像。实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)

2.1 使用方式

background-image: none|url (url)

参数值

作用

none

无背景图(默认的)

url(url)

使用绝对或相对地址指定背景图像

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS背景之背景图片</title>
<style>
div {
width: 500px;
height: 600px;
/* 不要落下 url(url) */
background-image: url(images/baidu_logo.png);
}
</style>
</head>

<body>
<div></div>
</body>

</html>

CSS篇十——(1)_背景图_02

3. 背景平铺

background-repeat属性使背景图片在HTML页面上进行平铺。

3.1 使用方式

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值

作用

repeat

背景图像在纵向和横向上平铺(默认)

no-repeat

背景图像不平铺

repeat-x

背景图像在横向上平铺

repeat-y

背景图像在纵向平铺

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS背景之背景图片、背景平铺</title>
<style>
div {
width: 900px;
height: 6800px;
/* 不要落下 url(url) */
background-image: url(images/baidu_logo.png);
/* 背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 默认情况下图片是平铺的 */
/* background-repeat: repeat; */
/* 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 沿着y轴平铺 */
background-repeat: repeat-y;
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
background-color: steelblue;
}
</style>
</head>

<body>
<div></div>
</body>

</html>

CSS篇十——(1)_背景图_03

标签:平铺,repeat,url,背景,CSS,background,背景图片
From: https://blog.51cto.com/u_13354745/5727208

相关文章

  • threejs-模型点击以及添加CSS2DObject
    模型点击事件网上教程挺多的,官网好像也有demo,这里我就只记录我碰到的问题以及解决方案:首先要清楚一件事,就是模型的展示需要一个容器,当这个容器是body|window和非全屏的......
  • 关于css方面的回顾学习
    在css中有几个常用的单位:px、em、%这三个单位都是相对的单位。px:像素值,这个是相对于显示屏分辨率而言的。em:就是给字体设置font-size值的,如果元素的font-size为14px,那么1em......
  • CSS篇八
    一、CSS的元素显示模式1.什么是元素的显示模式作用:网页的标签非常多,在不同的地方会用到不同的标签,了解他们的特点能够更好的布局网页。元素显示模式就是元素(标签以什么方......
  • css的flex
    一、flex的flex-direction属性:规定灵活项目的方向值 描述row默认值灵活的项目将水平显示,正如一个行一样。row-reverse 与row相同,但是以相反的顺序。......
  • 常用css样式
    一、文本样式1、常用的text-decoration:underline;下划线text-decoration:line-through;横贯线text-decoration:underlinewavyred;下划线是红色的波浪lett......
  • css动画
    一、CSS3过渡动画:div{width:100px;height:100px;background:yellow;transition:width2s;-moz-transition:width2s;/*Firefox4*/-webkit-transition:width......
  • CSS:鼠标移动到图片上的动画
    CSS:鼠标移动到图片上的动画.picimg{ width:100%; left:0; top:0; right:0; bottom:0; margin:auto; transition:all.5s;}.pic:hoveri......
  • 带有旋转效果的提交按钮 - 仅限 CSS - 一步一步
    带有旋转效果的提交按钮-仅限CSS-一步一步HTML对于HTML,我们需要一个带有文本和“检查”svg元素的按钮。我们将显示文本并隐藏svg。在按钮焦点上,我们将显示sv......
  • element.css
    #dividerTitle{color:dimgrey;font-weight:bold;font-family:"Arial";}.alignRight{margin-left:40%;}.el-header,.el-footer{background-col......
  • CSS空心箭头
    使用before和after伪类实现空心箭头//主要利用before和after的边框实心箭头,通过绝对定位覆盖完成看上去像空心箭头的设计.dom{display:inline-block;position:......