背景样式的重要知识点

最新推荐文章于 2024-06-22 19:05:40 发布
最新推荐文章于 2024-06-22 19:05:40 发布
阅读量115 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47651772/article/details/128121364
版权

1: background-color  设置背景颜色

2:background-image来设置背景图片

    语法：background-image:url(相对路径);

    可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色

    图片在元素中的位置：

        如果背景图片大于元素，默认会显示图片的左上角

        如果背景图片和元素一样大，则会将背景图片全部显示

        如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素  

3:background-repeat用于设置背景图片的重复方式

 可选值：

    repeat，默认值，背景图片会双方向重复（平铺）

    no-repeat ，背景图片不会重复，有多大就显示多大

    repeat-x， 背景图片沿水平方向重复

    repeat-y，背景图片沿垂直方向重复

4:background-position可以调整背景图片在元素中的位置

    背景图片默认是贴着元素的左上角显示

可选值：

该属性可以使用 top right left bottom center中的两个值，来指定一个背景图片的位置

        top left 左上

        bottom right 右下

 如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量，

        第一个值是水平偏移量

            - 如果指定的是一个正值，则图片会向右移动指定的像素

            - 如果指定的是一个负值，则图片会向左移动指定的像素

        第二个是垂直偏移量  

            - 如果指定的是一个正值，则图片会向下移动指定的像素

            - 如果指定的是一个负值，则图片会向上移动指定的像素

5:background-clip 设置背景色的范围

      可选值：

          border-box 默认值，背景颜色会出现在边框的下边

          padding-box  背景不会出现在边框，只会出现在内容区和内边距

          content-box  背景只出现在内容区

6:background-origin

    设置背景图片的偏移量计算的原点,配合偏移量使用的

      padding-box  从内部距处开始计算   默认值

      content-box  背景图片的偏移量从内容区处计算

      border-box   从边框开始计算偏移量

7:background-size 设置背景图片的大小

  参数：

    第一个值：宽度

    第二个值：高度

   如果只写一个，第二值，默认为auto

    cover  图片的比例不变，将元素铺满 (比较常用)

    contain 图片比例不变，将图片完整显示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        /* 需求1:添加背景色 */
		/* 1、 background-color: ;
		添加背景色
		*/
		background-color: red;
        /* 需求2:添加背景图片 */
		background-image:url(./img/小图.webp) ;
		/* background-image: url(./img/大图2.webp); */
			/* 2、background-image:url();
			url() 指向图片引入的路径
			如果引入的图片小于盒子，图片默认会铺满
			如果引入的图片大于盒子，图片默认显示的是左上角的位置
			*/
        /* 需求3:虽然图小，但图片我只要一张*/
		/* 3、background-repeat:;设置背景图是否铺满
		  可选值
		  	repeat  铺满
			no-repeat  不铺满，留一张
			repeat-x  水平方向铺满
			repeat-y   垂直方向铺满
		*/
		background-repeat:no-repeat;

        /* 需求4:调整背景图片在元素中的位置 */
		/* 4、background-position: ; 调整背景图位置
		    参数：（参数之间用空格隔开）
			 	参数1  水平方向位置
				参数2  垂直方向位置
			 写法1：通过这几个方位词来调整图片的位置
			  left  right  top  bottom  center 
			 写法2:直接写大小 例如：200px 100px 
			 注意：
			    参数2如果不写的话，默认是center 
			  
		*/
		background-position:200px;

      }
    </style>
  </head>
  <body>
    <div class="box1">
		<!-- <img src="./img/小图.webp" alt=""> -->
		111111 
	</div>
  </body>
</html>
<!-- 
1: background-color  设置背景颜色
2:background-image来设置背景图片
	- 语法：background-image:url(相对路径);
	-可以同时为一个元素指定背景颜色和背景图片，
		这样背景颜色将会作为背景图片的底色
	-图片在元素中的位置
		如果背景图片大于元素，默认会显示图片的左上角
		如果背景图片和元素一样大，则会将背景图片全部显示
		如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素	
3:background-repeat用于设置背景图片的重复方式
 可选值：
	repeat，默认值，背景图片会双方向重复（平铺）
	no-repeat ，背景图片不会重复，有多大就显示多大
	repeat-x， 背景图片沿水平方向重复
	repeat-y，背景图片沿垂直方向重复
4:background-position可以调整背景图片在元素中的位置
	背景图片默认是贴着元素的左上角显示
可选值：
	该属性可以使用 top right left bottom center中的两个值
		来指定一个背景图片的位置
		top left 左上
		bottom right 右下
		如果只给出一个值，则第二个值默认是center

  也可以直接指定两个偏移量，
		第一个值是水平偏移量
			- 如果指定的是一个正值，则图片会向右移动指定的像素
			- 如果指定的是一个负值，则图片会向左移动指定的像素
		第二个是垂直偏移量	
			- 如果指定的是一个正值，则图片会向下移动指定的像素
			- 如果指定的是一个负值，则图片会向上移动指定的像素
 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .box1 {
        height: 500px;
        width: 500px;
        padding: 20px;
        border: 10px red double;
        margin: 0 auto;
        /*设置一个背景颜色*/
        background-color: #bfa;
        background-clip: content-box;
        /* 引入背景图 */
        background-image: url(./img/小图.webp);
        /* 设置图片不重复 */
        background-repeat: no-repeat;
        /* 设置图片的位置 */
        background-position: 100px 50px;
        /* 设置图片偏移的原点 */
        background-origin: border-box;
      }
      .box2{
        width: 100%;
        height: 100%;
        background-color: rgba(255, 235, 205,.6);
        
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <!-- <div class="box2"></div> -->
    </div>
  </body>
</html>
<!-- 
5:background-clip 设置背景色的范围
      可选值：
          border-box 默认值，背景颜色会出现在边框的下边
          padding-box  背景不会出现在边框，只会出现在内容区和内边距
          content-box  背景只出现在内容区

6:background-origin 
    设置背景图片的偏移量计算的原点,配合偏移量使用的
      padding-box  从内部距处开始计算   默认值
      content-box  背景图片的偏移量从内容区处计算
      border-box   从边框开始计算偏移量
 -->


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        height: 500px;
        width: 500px;
        border: 1px solid red;
        margin: 50px auto;
        /* 引入背景图 */
        /* background-image: url(./img/小图.webp); */
        background-image: url(./img/大图2.webp);
        /* 背景图不重复 */
        background-repeat: no-repeat;
        /* 设置背景图的大小 */
        /* background-size: 300px auto; */
        background-size:cover;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>
<!-- 
7:background-size 设置背景图片的大小
  参数：
    第一个值：宽度
    第二个值：高度
        如果只写一个，第二值，默认为auto
        
    cover  图片的比例不变，将元素铺满 (比较常用)
    contain 图片比例不变，将图片完整显示
 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        height: 300px;
        width: 300px;
        /*设置一个背景颜色*/
        /* background-color: red; */
        /*设置一个背景图片*/
        /* background-image: url(./img/小图.webp); */
        /*设置背景不重复*/
        /* background-repeat: no-repeat; */
        /*设置背景图片的位置*/
        /* background-position: center; */
        /* 设置图片大小 */
        /* background-size: 150px; */
        /* 设置图片偏移的原点 */
        /* background-origin: border-box; */
        /*  设置背景色的范围 */
        /* background-clip: padding-box; */

        /*
				  background
				  	- 通过该属性可以同时设置所有背景相关的样式,
                  样式值之间用空格隔开即可
				  	- 没有顺序的要求，谁在前谁在后都行
				  		也没有数量的要求，不写的样式就使用默认值
				    -background-size要写在background-position后面
				 */
        background: #bfa url("./img/小图.webp") center/200px no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

qq_47651772
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Scrollbar浏览器滚动条样式美化-知识点-案例
JackieDYH的博客
07-21 2155
滚动条样式一 /* 样式一 */ /*滚动条整体样式 body:: 只给body加样式 ::给全部*/ ::-webkit-scrollbar { width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } /*滚动条里面小方块*/ ::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:
2023年web前端开发知识点总结.doc
11-07
以下是 CSS 的一些重要知识点： 1. CSS 选择器：CSS 选择器是用于选择要应用样式的HTML元素的方式，例如 `.class` 选择器、`#id` 选择器、`tag` 选择器等。 2. CSS 属性：CSS 属性是用于控制网页样式的方式，例如 `...
前端：background-image引入svg图片背景浅析
Pain4Dawn的博客
12-06 2万+
前端：background-image引入svg图片背景浅析概述掌握的知识background-image相关属性svg相关属性核心 概述 background-image引入图片，之前给笔者印象是利用background-size属性、background-repeat属性可以控制图片的缩放，拉伸从而实现背景图片的自适应。但是当遇到background-image遇到svg时，发现了不一样的结果...
渐变导航--滑动固定头部
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
05-16 868
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;透渐变导航&lt;/title&gt;&lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&gt;&
CSS中背景图片的属性：background-repeat、background-position、background-size
xuehyunyu的博客
05-26 1万+
背景图片的各种属性： 1、background-repeat：设置图片平铺方式。有三个属性：no-repeat（图片保留自身大小不平铺）、repeat-x（图片在水平方向上平铺）、repeat-y（图片在垂直方向上平铺） 2、background-position：确定图片显示的位置。 background-position: 30px 50px;   图片在水平方向上向右偏移30px，在垂
CSS 核心知识点总结
大剑师兰特的GIS世界
05-27 2002
CSS（Cascading Style Sheets，层叠样式表）是用于描述网页文档如何呈现给用户的样式语言。它与HTML一起构成了网页设计的基础。以下是CSS的一些核心知识点归纳总结
行测笔记（主要知识点）
刘鑫磊
01-30 1万+
行测笔记
软件工程知识点总结
热门推荐
CherryChenieth的博客
04-11 5万+
文章目录一、软件工程概述1. 定义2. 软硬件失效3. 软件危机4. 软件工程三要素5. 软件工程目标6. 软件工程研究内容7. 软件工程知识体系二、软件生命周期模型2.1 软件工程过程：PDCA循环2.2 软件生命周期 software life cycle2.3 过程模型（软件生命周期模型）2.3.1 瀑布模型2.3.2. V模型和W模型2.3.2 原型方法(prototyping)2.3.4. 演化模型2.3.5. 增量模型2.3.6. 螺旋模型2.3.7. 喷泉模型(迭代模型)2.3.8. 构件组
H5的重要知识技术点
wanggang_512的博客
12-14 5476
H5的重要知识技术点 SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？ SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。   因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE...
css知识点总结
一枚数学专业的小码农的博客
09-12 689
css全面解析
html5期末知识点归纳总结,web期末考试知识点
weixin_35879493的博客
06-15 738
题型及知识点一、 知识点：上课内容全覆盖(除补充的html5和css3的内容)常用的html标记及属性，弄清楚哪些是块元素，哪些是行内元素 ….特殊字符标记：p40Css属性i. 字体：font-size font-family font-weight font-variant font-style fontii. 文本外观:color letter-spacin...
山东专升本计算机Word知识点总结.doc
06-22
Word 知识点总结 Word 是 Microsoft Office 软件套件中的一部分，负责处理文字编辑、格式化、多媒体混排、表格处理、版式设计与打印、拼写和语法检查等多种功能。下面是 Word 的知识点总结： 一、Office 组件 * ...
2023年web前端开发知识点总结.docx
11-07
2. CSS样式规则：CSS样式规则包括选择器和声明，声明是指样式的具体内容，例如字体、颜色、背景图像等。 3. CSS盒模型：CSS盒模型是CSS中的核心概念，包括内容区域、内边距、边框和外边距四个部分。 4. CSS浮动和...
2022年HTML相关知识点表格标签(1).pptx
11-02
HTML 表格标签知识点总结 HTML 表格标签是 HTML 语言中用来创建表格的基本标签，通过这些标签，可以创建出各种形式的表格，满足不同的需求。在本节中，我们将详细介绍 HTML 表格标签的使用方法和相关知识点。 1. ...
html部分知识点巩固.doc
04-10
HTML，全称HyperText Markup Language，即超...HTML的知识点非常广泛，以上只是基础部分，深入学习还包括CSS样式、JavaScript交互、响应式布局、框架应用等。熟练掌握HTML能帮助开发者创建功能丰富、布局美观的网页。
css 三角形
wang_59881的博客
06-18 267
不写 border-inline-start，是这样的效果。
HTML/CSS 基础
最新发布
Qj60776671的博客
06-22 191
导航标签
CSS 修改鼠标图标样式
JiuYux的博客
06-18 314
自定义的鼠标图标，推荐使用ico或cur格式，png也可以。
css单独使用定位position: absolute 和 position: relative；
早晚的博客
06-18 236
时，它会脱离正常的文档流，并相对于其最近的非 static 定位的父元素（即 position 属性为 absolute、relative、fixed 或 sticky 的元素）进行定位。时，它会相对于其正常位置进行定位。这意味着你可以使用 top、right、bottom 和 left 属性来移动元素，但是它会保留在文档流中的空间。使用 top、right、bottom 和 left 属性可以指定元素相对于其参考点的位置。相对定位经常用于微调元素的位置，而不影响其他元素的布局。
Web前端知识点总结(吐血推荐).doc
11-12
Web前端知识点总结(吐血推荐).doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值