首页 > 其他分享 >CSS背景样式使用

CSS背景样式使用

时间:2022-11-11 13:04:44浏览次数:49  
标签:repeat 样式 背景 url background 图像 帝国 CSS


CSS背景样式使用_背景颜色

CSS背景样式使用_背景颜色_02

CSS背景样式使用_背景颜色_02

CSS背景样式使用_背景颜色_02

CSS背景样式使用_背景颜色_02

CSS背景样式使用_背景颜色_02

CSS背景样式使用_背景颜色_02

CSS背景样式使用_背景图_08




语法:


background-color : transparent | color


取值:


transparent

: 

默认值。背景色透明

color

: 

指定颜色。请参阅 颜色单位 ​和 附录:颜色表

说明:


设置或检索对象的背景颜色。
当背景颜色与背景图像( ​ background-image ​)都被设定了时,背景图片将覆盖于背景颜色之上。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundColor


CSS背景样式使用_背景颜色_09




语法:


background-image : none | url ( url )


取值:


none

: 

默认值。无背景图

url ( url )

: 

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

说明:


设置或检索对象的背景图像。
当背景图像与背景颜色( ​ background-color ​)都被设定了时,背景图片将覆盖于背景颜色之上。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundImage 

url为相对路径设置时容易出错要注意!!

CSS背景样式使用_背景颜色_10


语法:


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


取值:


repeat

: 

默认值。背景图像在纵向和横向上平铺

no-repeat

: 

背景图像不平铺

repeat-x

: 

背景图像仅在横向上平铺

repeat-y

: 

背景图像仅在纵向上平铺

说明:


设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( ​​ background-image​​​)。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundRepeat 。 


CSS背景样式使用_背景图_11



语法:


background-position : length || length
background-position : position || position


取值:


length

: 

百分数 | 由浮点数字和单位标识符组成的长度值。请参阅​​ 长度单位 ​

position

: 

top | center | bottom | left | center | right

说明:


设置或检索对象的背景图像位置。必须先指定 ​​ background-image ​​​属性。
该属性定位不受对象的补丁属性( ​​​ padding ​​​)设置影响。
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( ​ padding​)的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition



.html代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>字体样式用法</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<table width="50%" height="200px" border="1" align="center" cellspacing="0">
<caption>大秦帝国基本信息</caption>
<tr>
<td>作者</td>
<td>孙皓辉</td>
</tr>
<tr>
<td>字数</td>
<td>504万</td>
</tr>
<tr>
<td>出版社</td>
<td>中原出版传媒集团</td>
</tr>
</table>
<p>
一、大秦帝国是中国文明的正源。大秦帝国所处的时代是中国五千年文明史中最重要的一个时代。
不幸的是,作为统一帝国的短促与后来以儒家观念为核心的官方意识形态的刻意贬损,
秦帝国在“暴虐苛政”的恶名下几乎湮没在历史的沉沉烟雾之中。有限史料所显示的错讹断裂且不必论,
明清通俗小说《东周列国志》、《二十四史演义》等通俗史话作品,对秦帝国的描述更是鲁莽灭裂,
放肆亵渎,竟然将这段历史涂抹得狰狞可怖面目全非。这种荒诞的史观,非但是官方正统意识形态的形象化,
而且流布民间,形成了中国民众源远流长的“暴秦”口碑。事实上,对于酷爱说古道今的中国老百姓而言,
话本小说、评书戏剧、民间传说等对民众意识所起到的浸润奠基作用,远远大于晦涩难懂的史书。
两千年来,在对秦帝国的描绘评判中,旧的正统形态与旧的民间艺术异曲同工,或刻意贬损,或肆意涂抹,
悠悠岁月中竟是众口铄金,中国文明正源的万丈光焰竟然离奇得变形了。
</p>
<p>二、通常意义上,“帝国”是一个历史概念。它一般包含三个基本标准:
其一,统一辽阔的国土(小国家没有帝国);
其二,专制统治(民主制没有帝国);
其三,强大的军事扩张(无扩张不成帝国)。
秦在这三个方面都表现得极为鲜明,可算是典型的古典帝国,而不是一个普通的王朝。
</p>
</body>
</html>


.css代码如下:

*{font-family:"宋体"}
a{text-decoration:none}
p{line-height:26px;letter-spacing:0.1em;text-indent:1cm;direction:ltr}
table{
text-align:center;
background-color:#ffbbaa;
background-image:url(../images/bg.gif);//注意
background-repeat:no-repeat;
background-position:50%
}

显示如下:

CSS背景样式使用_css_12


标签:repeat,样式,背景,url,background,图像,帝国,CSS
From: https://blog.51cto.com/u_15866446/5844727

相关文章

  • css中z-index层级
    1.z-index简介(1)概念z-index属性指定了元素与元素之间的z轴上的顺序,而z轴决定元素之间发生覆盖的层叠关系。(2)属性值1.默认auto为什么元素添加定位属性(不包括sta......
  • 【XAML】 WindowChrome 自定义窗体样式
    导读【XAML】WindowChrome的功能详解背景 WPF有两种主流的自定义Window窗体的方案,都各有缺点。方法一、缺点《WPF编程宝典》介绍了使用WindowStyle="None"和AllowsT......
  • CSS通过Flex实现上标
    效果图Code<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="view......
  • CSS导航栏最后一个元素居右(.nav-site .nav-right{margin-left: auto;}
    效果如图Code<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="vi......
  • 路飞项目的中间部分样式,登录接口;腾讯云发短信
    目录路飞项目一、首页中间部分样式二、多方式登录接口1.登录注册多方式登录验证码登录2.代码详情3.手机号是否存在接口通过get请求腾讯云一、申请使用腾讯云短信二、API和......
  • 学习笔记 之 简单了解有关 CSS 那点事儿
    LZ-Says:调整心态,多读书,丰富内心,提升个人文化底蕴。前言前几天,初步了解了下HTML相关的知识点,在学习回顾时,还好,大部分都在,只是新增了一些其他内容,例如自适应等等。上手......
  • css
        ......
  • css学习-字体使用
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content=......
  • 设置背景图片模糊效果
    一、想要实现效果二、实现过程为图片添加样式 -webkit-filter:blur(5px); 三、CSS3中filter属性相关内容具体查看以下链接https://m.runoob.com/cssref/css3-pr-......
  • 纯CSS实现文本展开收起
    提到CSS状态切换,大家都能想到inputtype="checkbox"吧。这里我们也需要用到这个特性,首先加一个input,然后把之前的button换成label,并且通过for属性关联起来!<div......