首页 > 其他分享 >CSS样式更改篇——背景Background

CSS样式更改篇——背景Background

时间:2023-04-26 11:32:14浏览次数:35  
标签:box 滚动条 更改 背景 #### Background 选择器 CSS


上篇文章主要讲述了CSS的基础用法,讲述了如何定义头文件,导入CSS文件,id和class选择器,元素选择器,后代选择器,子元素选择器,兄弟选择器,伪类选择器等等,让大家对CSS选择器有个简单的认识和了解。这篇接上篇文章,继续讲解CSS的基础用法。 ###背景Background 背景可以设置很多,比如背景颜色,背景图片,背景定位,背景重复,背景关联,

####1)).背景颜色

<div style='background-color='red'></div>

####2)).背景图片

<div style='background-image: url('1.png');'></div>

####3)).背景定位

<div style='background-position:center'></div>
center   中间
top      顶部
bottom   底部
right    右边
left     左边
还可以使用百分比来设置定位:
<div style='background-position:40% 50%'></div>
或者设置像素值:
<div style='background-position:100px 100px'></div>

####4)).背景显示方式

<div style=' background-repeat:repeat-x'></div>
repeat-x 水平平铺图片
repeat-y 垂直平铺图片
no-repeat 不平铺图片

####5)).背景滚动条

<div style='background-attachment:fixed'></div>
fixed   固定 不出现滚动条
scroll  出现滚动条
no      没有滚动条

####6)).背景大小

<div style='background-size:50px 50px'></div>

####7)).背景图片的定位区域

<div style='background-origin:content-box'></div>
content-box  文本内容区域
padding-box   内边距区域
border-box    外边框区域

####8)).背景裁剪区域

<div style='background-clip:content-box'></div>
content-box  裁剪文本内容区域
padding-box  裁剪内边距区域
border-box   裁剪外边框区域

###总结 这篇文章主要介绍了CSS样式更改篇中的背景Background的基本设置,希望让大家对CSS选择器有个简单的认识和了解。

CSS样式更改篇——背景Background_选择器

标签:box,滚动条,更改,背景,####,Background,选择器,CSS
From: https://blog.51cto.com/u_13389043/6226758

相关文章

  • uniapp 动态修改 css 样式
    css使用var注入变量,达到设置动态样式的需求声明css变量时,变量名前面要加两根连词线(--);变量使用kebab-case命名方式,即--header-color而不是--headerColor;变量名大小写敏感,--header-color和--Header-Color是两个不同的变量名;var()函数用于读取变量。接下来,看......
  • css
    css类似魔术师吧,把骨架html让网页更加饱满。给背景给文本给字体表格关系选择器子代选择器相邻兄弟选择器通用兄弟选择器盒子模型弹性盒子模型文档流脱离文档流1.绝对定位2.相对定位3.浮动还是感觉自己速度太慢了,我应该多方面出发mysql软件测试javascriptpythonpython框架......
  • 百度首页静态展示页面HTML+CSS
    一直觉得百度首页很复杂的,有那么多的东西,跟这个博主学习了之后,仿写了一下,样式好像很简单只设置的一些组件的高度而已,不得不说,CSS真是个好东西呀话不多说,直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>百度首页</titl......
  • CSS中:root的运用
    CSS中:root的运用:  https://blog.csdn.net/weixin_41829196/article/details/128530267?ops_request_misc=&request_id=&biz_id=102&utm_term=css%20:root&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-128530267.142^v86......
  • 《c#高级编程》第5章C#5.0中的更改(十一)——字符串插值
    在C#5中,引入了字符串插值(stringinterpolation)语法,它提供了一种简单、直观的方式来将变量的值嵌入到字符串中。在以前的版本中,我们需要使用字符串格式化功能来实现这个目的,例如:intcount=42;stringmessage=string.Format("Theansweris{0}",count);而在C#5中,我......
  • 《c#高级编程》第4章C#4.0中的更改(九)——协变和逆变
    动态字典(DynamicDictionary)是指一个键值对集合,其中键和值的类型都可以在运行时确定并且可以动态变化。在C#中,可以使用dynamic关键字来实现这一功能。例如,下面的代码演示了如何创建一个动态字典并向其中添加元素:dynamicdict=newSystem.Dynamic.ExpandoObject();dict.Name......
  • 《c#高级编程》第4章C#4.0中的更改(八)——协变和逆变
    一、协变C#协变是指在一些特定的情况下,可以将一个派生类型的实例赋值给其基类或接口类型的引用。这里的“派生类型”指的是从某个基类或接口继承并增加了新的成员的类型。C#4.0引入了对协变和逆变的支持。其中,协变针对的是返回类型,逆变则针对参数类型。通过使用协变和逆变,可以......
  • HTML+CSS学习--HTML表单标签
    表单1:表单标签<form></form>属性:action='接口地址'method='get/post'name='表单名称'2:表单控件<input>属性:type='控件类型'name:属性标识表单域的名称;Value:属性定义表单域的默认值,其他属性根据type的不同而有所变化。maxlength:控制最多输入的字符数,Size:控制框的宽度(......
  • HTML+CSS学习--HTML表单标签
     关注我了解更多web技术知识,带你一路“狂飙”到底!上岸大厂不是梦!表单1:表单标签<form></form>属性:action='接口地址'method='get/post'name='表单名称'2:表单控件<input>属性:type='控件类型'name:属性标识表单域的名称;Value:属性定义表单域的默认值,其他属......
  • centos 7更改默认网卡名称
     [root@dev1-k8s-node-3~]#cd/etc/sysconfig/network-scripts/[root@dev1-k8s-node-3network-scripts]#cpifcfg-ehs192ifcfg-eth0[root@dev1-k8s-node-3network-scripts]#mvifcfg-ehs192ifcfg-ehs192-old[root@dev1-k8s-node-3network-scripts]#sed-i&quo......