温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3如何使用background-origin属性制作书信背景页效果

发布时间:2022-03-02 14:20:33 来源:亿速云 阅读:180 作者:小新 栏目:web开发

这篇文章主要介绍了css3如何使用background-origin属性制作书信背景页效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

css3中background属性的功能更加强大了,它允许在同一个元素内叠加多个背景图像。

首先介绍一下background属性:

background :

取值:

<background-image>:指定或检索对象的背景图像。

<background-origin>:指定背景的显示区域。参见background-origin

<background-clip>:指定背景的裁剪区域。参见background-clip

<background-repeat>:设置或检索对象的背景图像是否及如何重复铺排。

<background-size>:指定背景图片的大小。参见background-size<background-position>:设置或检索对象的背景图像位置。

background-clip :

取值:border-box:从border区域向外裁剪背景。padding-box:从padding区域向外裁剪背景。content-box:从content区域向外裁剪背景。no-clip:从border区域向外裁剪背景。

background-origin :

取值:border:从border区域开始显示背景。padding:从padding区域开始显示背景。content:从content区域开始显示背景。

说明:

用来决定 background-position 计算的参考位置。

background-size :

取值:<length>:由浮点数字和单位标识符组成的长度值。不可为负值。<percentage>:取值为0%到100%之间的值。不可为负值。

说明:

设置背景图片的大小。

指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

完整参考代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>background-origin</title>

<style type="text/css">

div {

    height:600px;

    width:416px;

    border:solid 1px red;

    padding:120px 4em 0;

    background:url(images/p3.jpg) no-repeat;

    -moz-background-origin:border;

    -webkit-background-origin:border;

    background-origin:border;

    -moz-background-size:cover;

-webkit-background-size:cover;

background-size:cover;

    overflow:hidden;

}

div h2 {

    font-size:18px;

    font-family:"幼圆";

    text-align:center;

}

div p {

    text-indent:2em;

    line-height:2em;

    font-family:"楷体";

    margin-bottom:2em;

}

</style>

</head>

<body>

<div>

    <h2>春</h2>

    <p>盼望着,盼望着,东风来了,春天的脚步近了。一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水长起来了,太阳的脸红起来了。小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草绵软软的。 </p>

    <p>桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已经满是桃儿、杏儿、梨儿!花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在草丛里,像眼睛,像星星,还眨呀眨的。</p>

</div>

</body>

</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“css3如何使用background-origin属性制作书信背景页效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI