CSS Note 1.9 background

最新推荐文章于 2023-03-22 00:19:05 发布

原创最新推荐文章于 2023-03-22 00:19:05 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#background #background-image #background-position #background-size

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨了CSS中各种样式的应用，包括字体、行高、内边距、背景图等属性的设置方法，以及如何通过不同的背景重复、大小、位置和固定方式实现丰富的视觉效果。同时，还介绍了如何调整透明度和断字方式，提供了详细的代码示例。

一、CSS

@charset "UTF-8";
#div1{
    font: 8px "Times New Roman" ;
    line-height: 10px;
    text-indent:  35px;
    padding: 30px 20px 15px;
    width: 180px;
    height: 240px;
    border: 4px rgba(255,125,125,0.7) solid;
    background-image: url("sc16.png") ,url("sc17.png"),url("sc5.png"),url("sc18.png");
    background-repeat: no-repeat,no-repeat,repeat,repeat;
    background-size: 60px 50px,40px 60px,100px 40px;
    background-position: top left,bottom right;
    background-origin: border-box,border-box,padding-box;
    background-clip:padding-box,border-box, content-box;
    background-attachment: scroll;
    opacity: 0.8;
    word-break: break-all;
}
#div2{
    width: 180px;
    height: 240px;
}
/*
background-repeat:
repeat     默认。背景图像将在垂直方向和水平方向重复。
repeat-x   背景图像将在水平方向重复。
repeat-y   背景图像将在垂直方向重复。
no-repeat  背景图像将仅显示一次。
inherit    规定应该从父元素继承 background-repeat 属性的设置。
background-size:
length     设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage     将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover  拉伸背景图片完全覆盖背景区域。
contain    拉伸背景图片，只能保持某一边完全覆盖且图片会完整显示。
background-attachment:
scroll     背景图片随页面的其余部分滚动。这是默认
fixed  背景图像是固定的
background-position:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom  如果仅指定一个关键字，其他值将会是"center"
x% y%  第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos  第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。
你可以混合使用％和positions
background-origin:
padding-box    背景图像填充框的相对位置
border-box     背景图像边界框的相对位置
content-box    背景图像的相对位置的内容框
*/

二、效果展示