css3 背景平铺

最新推荐文章于 2023-08-28 08:05:45 发布
最新推荐文章于 2023-08-28 08:05:45 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： CSS类 文章标签： css xhtml scroll c adobe html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdefu/article/details/5766986
版权

<!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>无标题文档</title>
<style type="text/css">
html {
background-attachment:fixed;
background-color:#f5f5f5;
background-image:-moz-linear-gradient(center top , #FFFFFF, #dddddd);
background-repeat:repeat-x;
color:#000000;
display:block;
height:100%;
margin:0;
padding:0;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#c7c7c7')";
filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#c7c7c7')";
}
/*html body {background:url('mhtml:http://www.yola.com/sites/yola.net/themes/yola_v2/css/ie7mhtml.php!bg_body') 0 0 repeat;}*/
body{
    background:url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%09%00%00%00%09%08%06%00%00%00%E0%91%06%10%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%00IIDATx%DA%84%D0%B1%0D%00A%08%03%C1M%DC%06%7D%D0%7F%25t%40%07%FCs%C1I%179%20%1B%ADd%A8*E%84%00e%A6%BA%5B3%F3%1C%0El%04%07N%C4%82%3F%82%03%1B%C1%81%8D%E0%C0Y%E7%C0E%EEW%9F%00%03%004%CD%A7b%EFb%20%10%00%00%00%00IEND%AEB%60%82") repeat scroll 0 0 transparent;
    margin:0;
    min-height:100%;
    padding:0;
    position:relative;
    top:0;
}

</style>

</head>

<body>
</body>
</html>

快乐无边
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3背景
macanfa的博客
07-01 622
本文简单整理了CSS3背景的几个知识点：背景的五大基本属性，以及新增的四个属性：background-origin、background-clip、background-size、background-break以及多背景简单使用
css如何让背景图片平铺？css背景图片平铺四种方式介绍
lin123_00的博客
05-09 8264
在网页设计的过程中，有时候可能会要求背景图片平铺，因为这样会让整个网页看起来比较好看，图片平铺可以不用具体设置body宽度和高度大小，就可以直接将图片平铺整个页面，那么，如何让背景图片平铺呢？接下来本篇文章将给大家来介绍关于css让背景图片平铺的方法，有需要的朋友可以参考一下。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 我们首先来看一下css设置背景图片平铺方式。 repeat：即默认方式，完全平铺背景； no-repeat：在X及Y轴方向均不平铺；
利用css3使背景平铺
渡江人博客
07-11 462
利用以下CSS3属性，可以达到使背景平铺的效果 background:url(http://*******) no-repeat center center fixed;-moz-background-size: cover;background-size: cover;
css3设置背景图始终平铺
qq_42655697的博客
03-17 187
直接复制代码到背景的div上 <div class="bgimg"></div> /* 设置背景 */ .bgimg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-width: 1200px; z-index: -10; zoom: 1; background-color: #dfc9d4; background: url('../../assets/im
CSS——让背景图片完全平铺
qq_43201350的博客
02-10 5570
background-size: 100% 100%;
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制...网页中id为content的元素被我们设置了使用images文件夹下的bg.GIF作为背景，与传统表格式布局中的设置并无差别，在默认状态下，背景同样以平铺的方式
CSS控制背景图像平铺实现边框阴影效果
09-25
标题“CSS控制背景图像平铺实现边框阴影效果”暗示了本文将讨论如何通过平铺背景图像来创造出类似边框阴影的视觉效果。描述中提到了该方法的灵活性，即它能适应不同大小的区域，同时兼容所有的IE浏览器。 从提供的...
用CSS把背景图片平铺参考.pdf
01-29
CSS背景图片平铺技术详解 在Web开发中，背景图片的平铺是非常常见的需求，今天我们将探讨使用CSS来实现背景图片的平铺。首先，我们需要了解背景图片平铺的基本概念，然后我们将详细讲解如何使用CSS来实现背景图片的...
CSS中如何实现背景图片的平铺和定位？
最新发布
官方推荐
08-28 2813
CSS中如何实现背景图片的平铺和定位？
css如何让背景图片平铺？css背景图片平铺四种方式介绍-前端教程
web前端入门基础进阶教程-htmlcssjs
06-30 6086
在网页设计的过程中，有时候可能会要求背景图片平铺，因为这样会让整个网页看起来比较好看，图片平铺可以不用具体设置body宽度和高度大小，就可以直接将图片平铺整个页面，那么，如何让背景图片平铺呢？接下来本篇文章将给大家来介绍关于css让背景图片平铺的方法，有需要的朋友可以参考一下。 我们首先来看一下css设置背景图片平铺方式。 repeat：即默认方式，完全平铺背景； no-repeat：在X及Y轴方向均不平铺； repeat-x：横向平铺背景； repeat-y：纵向平铺背景。 下面我们就来看一下css的
css将图片设置为背景并平铺
weixin_42630877的博客
10-04 3542
html部分： &lt;div class="image"&gt; css部分： .image{background-image: url(../img/tu1.png);float: left; background-size: cover; }  
零基础CSS入门教程(10)——背景图片平铺不平铺
weixin_61808806的博客
12-08 2260
如果是repeat他会分成四块一样的也是默认平铺，repeat-x平行平铺两个，repeat-y上下平铺两个，而no-repeat他是取消平铺，只显示一个*/如果是repeat他会分成四块一样的也是默认平铺，repeat-x平行平铺两个，repeat-y上下平铺两个，而no-repeat他是取消平铺，只显示一个。什么叫平铺呢，就是图像在窗口上是如何铺设的，是横向一张一张的铺，还是不平铺只展示一张图片，还是纵向的一张一张的铺。我们本小节学习了图片的平铺和不平铺，我们以后对图片设置花样多了许多方法。
CSS学习07：背景平铺
玉安_ZhangDe的博客
03-23 1114
目录 使用方法： repeat no-repeat repeat-x repeat-y 使用方法： background-repeat: repeat | no-repeat | repeat-x | repeat-y 参数值 作用 repeat 背景图片在纵向和横向上平铺（默认） no-repeat 背景图片不平铺 repeat-x 背景图片在横向上平铺 repeat-y 背景图片在纵向上平铺 repeat <...
css+css3
我的良大宝
12-11 611
css+css3背景background: 颜色 图片 是否平铺 是否固定 起始位置; background-color:red; //背景颜色 background-image:url(''); //背景图片 background-repeat:repeat-x|repeat-y|no-repeat; //背景图片 水平平铺 垂直平铺 不平铺 background-position:水
CSS3 背景技巧摘要
qq_37721114的博客
07-27 190
CSS3背景 background-origin 语法：background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 注意，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。 如： background:#ccc url(ht...
CSS背景颜色、背景图片、平铺、定位、固定
weixin_33924312的博客
04-29 1574
CSS背景颜色设置 background-color:red;如设置背景颜色为红色； 背景颜色设置支持3种写法： 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置（如果不设置图片默认设置为x轴y轴同时平铺即值为repeat） background-repeat:r...
用css3 gradient实现背景平铺，代替传统的图片平铺方法
weixin_33750452的博客
12-05 325
1.先贴上纵向平铺的例子代码及其效果截图：如果把上面代码中的top变成left,同时把高度和宽度值互换，则效果如图： 即变成横向平铺了。Firefox支持两种类型的CSS渐变:线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)(1)线性渐变(Linear Gradients) 要创建一个线性渐变，您需要设置一个起点和一个渐变的方向（或角度），...
三、CSS3背景
weixin_34392435的博客
11-22 64
@(HTML5)[背景] [TOC] 三、CSS3背景 CSS背景属性回顾 背景单个属性 background-image background-color background-repeat background-position background-attachment 背景符合属性 background 注意：复合属性会覆盖前面的单个属性，反之则不会 背景定位的扩展 在CSS3中，背景...
CSS入门背景样式的使用，背景颜色，背景图片，图片平铺，图片位置
u011333814的专栏
01-27 2540
背景颜色分为两类： 1.background-color:transparent    可理解为透明色 2.background-color:指定颜色         可指定具体颜色 背景图片分为两类： 1.background-image：none          可理解为没有或者默认 2.background-image:url(图片路径)        可设具体图片
css 背景图平铺间距
08-09
在CSS中，可以使用background-repeat属性来控制背景图像的平铺方式，其中包括repeat（默认）、no-repeat、repeat-x和repeat-y。如果需要在背景图像之间添加间距，可以使用background-repeat属性的space值。例如，将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值