当前所在位置: 首页 > 站长之家

HTML5 背景的显示区域实现

2021-03-05 本站作者 【 字体:

这篇文章主要介绍了HTML5 背景的显示区域实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


background-clip 属性规定背景的绘制区域。


默认值: border-box


继承性: no


版本: CSS3


JavaScript 语法: object.style.backgroundClip=“content-box”


background-clip: border-box|padding-box|content-box;


border-box 背景被裁剪到边框盒。 测试


padding-box 背景被裁剪到内边距框。 测试


content-box 背景被裁剪到内容框。


<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>背景的显示区域</title>

<style type="text/css">

div {

padding:50px; /* 设置内边距为50px */

border:50px solid rgba(255, 153, 0, 0.6); /* 设置边框宽度为50px */

height:100px;

width:200px;

color:#fff;

font-size:24px;

font-weight:bold;

text-shadow:2px 0 1px #f00,

-2px 0 1px #f00,

0 2px 1px #f00,

0 -2px 1px #f00;

background-image:url(../images/Bridge.jpg); /* 设置背景图像 */

background-position:0 0; /* 背景图像起始位为原点 */

background-repeat:no-repeat; /* 背景图像不平铺 */

-webkit-background-origin:border-box; /* 原点从边框开始(webkit) */

-moz-background-origin:border-box; /* 原点从边框开始(moz) */

background-origin:border-box; /* 原点从边框开始 */


-webkit-background-clip:border-box; /* 背景从边框开始显示(webkit) */

-moz-background-clip:border-box; /* 背景从边框开始显示(moz) */

background-clip:border-box; /* 背景从边框开始显示 */

}

</style>

<body>

<div>内容从这里开始</div>

</body>

</html>


到此这篇关于HTML5 背景的显示区域实现的文章就介绍到这了,更多相关HTML5 背景显示区域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!


来源:脚本之家


链接:https://www.jb51.net/html5/734542.html


阅读全文
相关推荐

老站长纷纷转型,流量困境下,我们该何去何从?

老站长纷纷转型,流量困境下,我们该何去何从?
831600.com报道:昨天晚上,收到松哥(卢松松)直播的提醒,我就点进去了,...

撕开小红书流量15个入口,你不知道的流量秘密(内附实操6000字攻略)

撕开小红书流量15个入口,你不知道的流量秘密(内附实操6000字攻略)
831600.com报道:在此,我们就说说这个关联推荐,再加上之前的小红书流量脉...

为什么需要在SEO优化营销中使用视频素材?

为什么需要在SEO优化营销中使用视频素材?
831600.com报道:人们被视频吸引。由于没有人有时间阅读文本,因此公司需要...

新网站如何做SEO优化?做SOE优化有哪些技巧?

新网站如何做SEO优化?做SOE优化有哪些技巧?
831600.com报道:网站上线之后首先会收录一个首页。开始有一个或者两个星期...

一天引流300+月入1万的项目变现实操详解

一天引流300+月入1万的项目变现实操详解
831600.com报道:几天前,我在朋友圈中发布了一段引流效果的视频。学员使用...

做什么网站赚钱 分享5个适合普通的个人网站

做什么网站赚钱 分享5个适合普通的个人网站
831600.com报道:目录类型网站 网站目录、分类目录网站类型虽然看似没有多...

反向链接对SEO的作用

反向链接对SEO的作用
831600.com报道:很多新手站长在做SEO的时候不知道反向链接的意思和对S...

seo前景如何?就业前景怎么样?

seo前景如何?就业前景怎么样?
831600.com报道:有一个事实,那就是任何行业,处于金字塔顶端的人是极少的...

SEO搜索引擎优化的几个重点

SEO搜索引擎优化的几个重点
831600.com报道:搜索引擎优化简称就是seo优化,搜索引擎优化是利用搜索...

B2B网站如何做好SEO优化

B2B网站如何做好SEO优化
831600.com报道:B2B网站是商家与商家的平台,SEO要引的便是买家与卖...