ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS漂亮盒子

2019-05-22 14:51:38  阅读:373  来源: 互联网

标签:box repeat 盒子 漂亮 背景图片 background 使用 position CSS


HTML文档中的所有元素都是由矩形盒子构成的——不管是包含页面结构的容器元素,还是段落中的每行文本,归根结底都是盒子。

1.背景颜色

设置页面背景颜色。

body {
    background-color: #bada55;
}

简写属性:

body {
    background: #bada55; /* 这里会把其他属性重置为默认值 */
}

通过background可以一次性地设置与背景相关的多个属性。

十六进制表示法:
一个#后面加上6位十六进制数字构成的字符串。
这个字符串由3组数字(每组各2位)构成,每个数字的取值范围是0~F。十六进制的意思就是每个数字都可能有16种不同的值,因此除了0~9这10个数,还要用A~F补足第11~16位数。
3组数字分别表示颜色中的红、绿、蓝(RGB)通道的值。每种颜色通道的值有256种可能,也就是2位十六进制数所能表示的可能性(16×16=256)。
如果3组数字中每组的2位数字相同,可以简写成3位数字。
颜色值也可以用预定义的关键字表示(比如red、green、blue等等)。

rgb()函数式表示法:
RGB的每个值可以是一个十进制数值,取值范围为0~255,也可以是一个百分比值,取值范围为0%~100%。

body {
    background-color: rgb(186, 218, 85);
}

hsl()函数式表示法:
色相-饱和度-亮度(hue-saturation-lightness),即HSL模型。

body {
    background-color: hsl(74, 64%, 59%);
}

注意,使用哪种表示法来表示颜色没有本质区别,它们只是表示同一事物的不同方法而已。

rgba()函数式表示法:
末尾的a表示alpha,是用于控制透明度的阿尔法通道。

body {
    /* 第四个参数表示透明度,取值范围为0~1.0,1.0表示完全不透明,0表示完全透明。 */
    background-color: rgba(186, 218, 85, 0.5);
}

CSS提供另一种方式来控制透明度。

.box {
    background-color: #bada55;
    opacity: 0.5;
}

使用opacity让整个元素都变透明了,包括元素中包含的内容。
使用opacity把一个元素设置为透明后,将无法再让其子元素变得不那么透明。

2.背景图片

<header class="profile-box">
</header>
.profile-box {
    width: 100%;
    height: 600px;
    background-color: #8Da9cf;
    background-image: url(img/big-cat.jpg); /* 设置背景图片 */
}

background-repeat的默认值(repeat)决定了图片会平铺到整个元素盒子,即背景图片要沿x轴和y轴重复。

.profile-box {
    background-image: url(img/big-cat.jpg); /* 设置背景图片 */
    background-repeat: no-repeat; /* 禁止重复 */
    /* 支持以空格分隔的针对两个方向的关键字声明语法 */
    /* background-repeat: repeat no-repeat; */
}

使用url()函数加载图片可以使用相对路径,也可以使用绝对路径,还可以使用图片的base64编码数据。

background-image: url(img/big-cat.jpg);

图片格式:

  • JPEG(有损压缩,适合照片)
  • PNG(无损压缩,适合图标等小尺寸文件)
  • GIF(动图)
  • SVG(矢量图)
  • WebP(Google开发的一种新图片格式)

位图意味着文件会包含每个像素的数据,拥有内在的维度(宽度和高度)。
SVG图形包含的是如何在屏幕上绘制图形的指令,它可以任意缩放,也可以在任意像素密度的屏幕上清晰呈现。

3.背景图片语法

3.1 背景位置

背景图片的位置由background-position属性控制。
background-position属性既可以使用关键字,也可以使用像素、em或百分比。最简单的情况下,可以只给两个值:一个表示相对于左侧的偏移量,一个表示相对于顶部的偏移量。

.profile-box {
    /* 省略 */
    background-position: 50% 50%;
}

如果使用像素或em单位来设置背景图片的位置,那么图片的左上角会相对于元素的左上角定位,也就是会偏移指定的数值。如果设置背景图片的位置时使用了百分比,定位的是图片中对应的点。如果水平或垂直方向都设置为20%,那么你定位的实际上是距图片左边和上边各20%的点,而这个点会与距离父元素左边和上边各20%的点重合。

使用关键字来对齐背景图片,要在x轴上用leftcenterright,在y轴上用topcenterbottom。顺序一般都是先x轴后y轴。

.profile-box {
    /* 省略 */
    background-position: left top;
}

在只使用两个关键字的情况下,规范并没有限定顺序(如可以使用top left)。

新语法允许给background-position添加外边空声明,先写边界关键字,再写长度值。

<p>
    <a href="/activate" class="link-with-icon">Activate flux capacitor</a>
</p>
.link-with-icon {
    padding-right: 2em;
    background-image: url(img/icon.png);
    background-repeat: no-repeat;
    background-position: right 1em top 50%;
}

使用calc()函数可以让浏览器替你计算任何数值(角度、像素、百分比,等等),甚至还支持动态计算的混合单位。

.link-with-icon {
    /* 省略 */
    background-position: calc(100% - 1em) 50%;
}

3.2 背景裁剪与原点

默认情况下,背景图片是绘制在元素边框以内的。如果把背景图片定位到边框下方,而边框又被设值为半透明,那么图片边缘就会出现半透明的边框。使用background-clip属性可以改变这个行为。
background-clip属性的默认值为border-box

3.3 背景附着

3.4 背景大小

3.5 背景属性简写

标签:box,repeat,盒子,漂亮,背景图片,background,使用,position,CSS
来源: https://www.cnblogs.com/gzhjj/p/10904729.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有