构造颜色,背景,图像

22.1
1.设定颜色
红色的几种合法定义:
#fOO
#ffOOOO
red
red(255,0,0)
red(100%,0%,0%)
2.十六进制三元组
第一个字节:红色的值
二 绿
三 蓝
简化写法:#cccccc 可写成#ccc,#ff6633 可写成#f63
3.17种具名颜色:
黑色 black 000000
藏蓝色 navy 000080
绿色 green 008000
海蓝色 teal 008080
银色 silver 0c0c0c
蓝色 blue 0000ff
酸橙色 lime 00ff00
浅绿色 aqua 00ffff
绛(jiang)紫色 maroon 800000
紫色 purple 800080
橄榄绿 olive 808000
灰色 gray 808080
红色 red ff0000
紫红色 fuchsia ff00ff
黄色 yellow ffff00
橙色 orange ffa500
白色 white ffffff

4.使用span更好的控制文本中局部区域的文本
<span>文本内容</span>

5.使用display属性提供区块转换
inline(转换成内联),block(转换成区块),none(不占位的隐藏)

6.背景图像渐变的制作
body{
background:#ccc url(xxx.gif)rpeat-x或y;
}

7.给一个区块加上背景
#branding{
width:700px;
height:20px;
background:url(xxx.gif)no-repeat;
}

8.给标题加上一个小图标
h1{
background:url(xxx.gif)no-repeat left center;
padding-left:20px;
}
如果希望使用百分比而不使用关键字,则0.50%这样就实现了垂直居中

9.圆顶角
<div>
<h2>...</h2>
<p>...</p>
</div>

div{
width:320px;
height:180px;
background:#ccc url(xxx.gif)no-repeat left bottom;
}
h2{
background:url(xxx.gif)no-repeat left bottom;
padding-left:40px;
}

10.简单的css阴影效果
<div>
<img src="xxx.jpg" />
</div>
div{
width:250px;
height:343px;
background:url(xxx.gif)no-repeat right bottom;
}
div img{
position:relative;
top:-2px;
left:-2px;
}

时间: 2024-10-29 15:44:41

构造颜色,背景,图像的相关文章

CSS:背景颜色/背景图像

使用CSS可以为html标签指定背景图像或背景颜色,并且可以设置图像的位置. 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-

CSS构造颜色、背景与图像

设定颜色 背景使用 图像使用 1.设定颜色 红色的几种合法定义; ????#f00; ????#ff0000; ????Red; ????Rgb(255,0,0); ????Rgb(100%,0%,0%); ? 2.十六进制三元组 ? ????第一个字节:红色的值; ????第二个字节:绿色的值; ????第三个字节:蓝色的值; ????简化写法:#cccccc 可写成 #ccc, #ff6633可以写成 #f63 ? 3.使用17种具名颜色 ????黑色(black)???? 000000 ?

背景图像坐标定位

实际上,如果没有发明image标签,可能就没有网页设计师这门职业. 然而对image标签的滥用可能导致纯修饰性的图像把页面弄乱.好在CSS使我们能够在页面上显示图像,而不需要让图像成为标记的一部分.实现方法是将图像作为背景添加到现有的元素中.  背景图像基础: 默认情况下,浏览器垂直和水平的重复显示背景图像,让图像平铺整个页面. 渐变效果:目前渐变非常时髦,你可能希望在页面上应用垂直渐变,为此需要创建一个很高但是很窄的渐变图像,然后将这个图像应用于页面的主体,并让他水平平铺. 因为这个渐变图像的

给网页添加背景图像总结

1.固定宽度和可变宽度的圆角框 方法一:适用于新型浏览器,直接用border-radius属性 方法二:适用于旧版浏览器,IE6等 对于固定宽度圆角框,需要有两个图像,一个图像用于框的顶部,一个用于框的底部. 对于可变宽度圆角框,需用到滑动门技术(随着框尺寸的增加,大图像有更多的部分显露出来,这样就实现了框扩展的效果),这个方法需用到四个图像(top-left,top-right,bottom-left,bottom-right),bottom-left应用于主框div,bottom-right

切换背景图像综合练习题

练习题: 根据所学知识,使用CSS3知识,实现背景图片的切换效果(不依赖js,点击小图切换大的背景图) 任务 给每个列表定义不同的背景颜色 提示:使用结构伪类选择器:nth-of-type() 设置缩略图外形效果 提示:使用伪元素::after制作圆形效果 1.给每个缩略图设置不同的图片 提示:使用伪结构选择器:nth-of-type(),并且配合::after 2.给每个缩略图添加透明度蒙板效果 提示:使用伪类选择器::before给缩略图添加蒙板效果 3.鼠标悬浮在缩略图上时,修改缩略图上蒙

Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)

1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). 角形(八边角)边色 FlutterLogoDecoration:实现Flutter图片 UnderlineTabindicator:下划线 2 介绍一个背景装饰对象,相当于Android中的shape.xml,定制各种各样的背景(边框.圆角.阴影.形状.渐变.背景图像). 3 BoxDecorati

CSS 背景图像

background-image 属性可以设置背景图像. 背景图像可以填充整个页面的,也可以填写一部分. background-image 属性的使用很简单:background-image:url(图片地址) 填充整个页面示例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>背景图片</title> 5 <style type="text/css"> 6 <!--背

css控制背景图像不随滚动条的滚动而滚动

这几天在写一个demo,设置背景图像, background: url("../images/bg.jpg") repeat ; 在使用 $(window).scroll(function() { ....}); 监听滚动条时,在google下正常运行,背景图像没有异常 在ie.360.火狐下滚动滚动条时,背景图像一闪一闪的,很难受. 百度:说需要调显示器的监视器的屏幕刷新频率 > 70 Hz . 可是我的电脑只有60Hz ,那么问题来了,很多小伙伴的电脑或许跟我的一样,那怎么办

为背景图像添加图像水印(位置随机)

1 <?php 2 /** 3 为背景图像添加水印(位置随机) 4 @param string $filename 需要添加水印的背景图片 5 @param string $water 水印图片 6 */ 7 function watermark($filename,$water){ 8 //获取背景图片的高和宽 9 list($b_w,$b_h) = getimagesize($filename); 10 //获取水印图片的高和宽 11 list($w_w,$w_h) = getimagesi