html中背景条纹效果,css 条纹背景效果

条纹背景是基于渐变背景。

CSS代码

.bg{

height: 100px;

width: 200px;

background: linear-gradient(#fb3,#58a);

}

将这两个色标拉近：

background: linear-gradient(#fb3 20%,#58a 80%);

div顶部的 20％区域被填充为 #fb3 实色，而底部 20％区域被填充为 #58a 实色。真正的渐变只出现在容器 60％的高度区域。

如果两个颜色都设为50%，就得到了两块均分div背景地实色。

因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸。

background: linear-gradient(#fb3 50%,#58a 50%);

background-size: 100% 20px;

由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹。

也可以创建不等宽条纹：

background: linear-gradient(#fb3 30%,#58a 30%);

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，

则该色标的位置值会被设置为它前面所有色标位置值的最大值。

这意味着，如果我们把第二个色标的位置值设置为0，那它的位置就总是会被浏览器调整为前一个色标的位置值

我们可以将上面地代码改成:

background: linear-gradient(#fb3 30%,#58a 0);

如果要创建多色条纹：

background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);

html中背景条纹效果,css 条纹背景效果相关推荐

html中背景条纹效果,css背景效果详解
CSS能够对网页中元素位置的排版进行像素级精确控制,拥有对网页对象和模型样式编辑的能力.本文为大家介绍了css设置背景的方法,希望对大家有一定的帮助. 本文将详细介绍CSS背景效果: 条纹背景 [双条 ...
html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...
html中背景条纹效果,CSS揭秘之《条纹背景》
先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示:也就是说真正的渐变只出现在容器 60%(从20%到80%) 的高度区域 ...
html中背景条纹效果,css3 条纹背景滚动效果
今天在一个网站上看到这样一个效果,我一开始以为一个背景gif图片,为了验证我的想法,我打开firebug 一查看,原来不是gif.是用css3完成的.于是我就在查看css3的api帮助下尝试着写一写 ...
html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...
在实际开发中,我们会给图片加上alt.给链接加上title,为了出故障预备,也可以提醒用户的内容是什么,或仅仅是tip提示.今天我们介绍一款不错的鼠标悬停TIP效果,图片如下: 这样的效果在实际开发中 ...
如何在css中设置音乐效果,css实现简单音乐符效果
css实现简单音乐符效果利用css3中的transform.animation.keyframes实现 1 2 3 4 5 6 7 Document 8 9 .box{ 10 width:60px; ...
CSS 条纹背景秘探
CSS 条纹背景秘探 CSS 条纹背景秘探 CSS 线性渐变 background-size 实现条纹垂直条纹斜向条纹 CSS 条纹背景秘探要想在网页中实现条纹图案,通常,我们的方法是创建一个 ...
html中背景条纹效果,使用CSS线性渐变制作条纹背景
主要使用的属性 linear-gradient background:linear-gradient(#000,#ccc); Paste_Image.png 取消中间的渐变过度 background: ...
html中背景条纹效果,纯css3实现条纹背景方法（水平，垂直，倾斜）
以上这些并不是背景图,而是由CSS样式代码实现.在现代标准浏览器中,我们通过CSS3的两个属性,一个是linear-gradient,即线性渐变,另一个是background-size,用来确定渐变的 ...

html中背景条纹效果,css 条纹背景效果

html中背景条纹效果,css 条纹背景效果相关推荐

最新文章

热门文章