css008 给网页添加图片
css008 给网页添加图片
1、 css和<img>标签
1、<img>标签是html的添加图片的标签,一般为:
<img src=”url.jpg” href=”describtion of the picture”>
2、css中添加图片:?
3、经常用来处理图片的css属性:
A、border(边框):每条边框都可以设置不同的颜色样式和宽度
B、padding(填充):在边框和图片之间添加空间,空间中可以设置背景色等各种属性
C、float(浮动):可以将图片浮动到相应布局的左侧或者右侧。可以多张图片一起浮动。
问题:word文档的图片也有一个浮于文字上方的设置,它是不占据空间的,一般它周围的东西会自动排在照片底部。这里的浮动好像是占据空间的,它周围的东西只会排在它周围。
D、margin(边距):图片和其他网页元素之间的距离。
E、对图片添加样式,一般只对其中部分图片添加样式,所以一般用类样式。
2、 添加背景图片
1、在css中添加背景图片:
background-image:url(图片地址) no-repeat;
2、可以创建一张背景图片包含所有需要的背景图片(这样可能会不太好的样子吧)
body{ background-image:url(images/bg.gif) }
路径可以是相对于文档的路径,也可以是相对于根目录的路径
现对于文档:url(../images/bg.gif)
相对于根目录:url(/images/bg.gif)
3、 控制重复
1、no-repeat
2、问题:可以控制什么东西重复,可以控制画两条border线吗?哪些东西可以重复,哪些东西不能重复??
3、重复有什么好处?可以得到什么样的效果??
4、background-repeat 属性指定图片要如何平铺或者不平铺
background-repeat属性接受四个值:
repeat:默认设置,从左往右,从上往下平铺填满指定空间
no-repeat:只显示图片一次,不做任何重复
repeat-x:沿x轴方向平铺,可用于做横幅之类的东西
repeat-y:沿y轴方向平铺,可以在网页元素任意一边添加阴影
4、 定位背景图片
1、定位背景图片:position:0 0;(后面跟的值为需要的图片在整张背景图片中的相对位置)
2、定位背景图片可以带来什么样的方便
3、可以空过不同方法设置图片的水平和垂直方向的起点:keyword 精确值 percentage
4、background-position:left/right/center left/right/center;
5、background-position:20px 20px;
6、background-position:50% 50%;(这个50%是相对于谁的??)
7、该属性的三个值可以混用。
8、如何固定图片:background-attacment属性
该属性可以有两个值:scroll(滚动) fixed(固定)
body{ background-image:url(images/logo.gif);
background-repeat: no-repeat;
background-attacment:fixed; }
9、定位背景图片的background-origin和background-clip
调整图片的起点 限制背景图片的区域
background-origin:border-box(图片显示在border区域左上角);
padding-box(图片显示在padding区域左上角)
cntent-box(图片显示在内容区域右上角)
background-clip:border-box(背景图片显示在border区域);
padding-box(背景图片padding区域)
cntent-box(背景图片显示在内容区域)
10、 缩放背景图片:background-size:100px 200px;
可以设置为:background-size:100px auto;
background-size:100% 100%;
11、 background-size:contain;迫使图片根据相应元素进行大小的调整,保持原来的长宽比进行伸展。
12、 background-size:cover;迫使图片根据相应元素进行大小的调整,保持原来的长宽比进行收缩。
5、 利用background快捷属性
1、background后面可以跟多个值,都是什么?
2、像font属性的快捷方式一样使用,一般不要这样写,太乱了。还有background的各种不同属性比如background-color和background在css中的顺序一定要注意。会产生覆盖。
3、background: url(../images/tell.png) no-repeat left; (在一个background里面可以写各种信息,比如颜色,背景图片,背景图片位置等)
6、 使用多个背景图片
1、使用多个背景图片是把图片叠加的意思吗,图片叠加得到特定效果,或者特定形状组合??
2、多张图片导入,并设置不同的重复方式以及不同的样式
7、 使用渐变色背景
1、使用渐变色,怎么使用?哪些语句?
2、线性渐变
background-image:linear-gradient(left black white);
(元素从左边开始以黑色开始到右边以白色结束。Black和white是关键字,可以用确定值或者rgb()来表示。里面的颜色可以添加多个)
3、颜色站:用百分数 确定值来控制颜色变化的位置
background-image:linear-gradient(left,black 20%, white 80%);
4、重复线性渐变
background-image:repeating-linear-gradient(bottom left,black 20%, white 80%);
5、径向渐变
background-image:radial-gradient(red blue);(椭圆形渐变)
background-image:radial-gradient(circle red blue);(圆形渐变)
径向渐变的尺寸:closest-side(从中心一直延伸到离中心最近边位置)
closest-corner(从中心点到最近的元素角的距离)
farthest-side(用于测量半径,从中心点到元素最远边的距离)
farthest-corner(用于测量半径,从中心点到元素最远角的距离)
6、重复径向渐变
和线性渐变一样,径向渐变可以设置重复
8、 用colorzilla轻松创建渐变
1、这个是什么新鲜的东西??
css008 给网页添加图片的更多相关文章
- CSS3-给网页添加图片
给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...
- JS为网页添加文字水印【原创】
最近需要实现为网页添加水印的功能,由于水印的信息是动态生成的,而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印,而为网页添加文字水印相关资料较少,于是就自己动手写了这个代码. 通常加动态水 ...
- delphi WebBrowser控件上网页验证码图片识别教程(一)
步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- 使用Jsoup解决网页中图片链接问题
在做Facebook和WhatsApp分享的时候,分享出去的谷歌短链,Facebook获取不到大图,和竞品展示的不一样,WhatsApp分享出去的短链没有图片和描述. WhatsApp: 分析竞品UC ...
- 关于在Safari浏览器中将网页添加到主屏幕的相关设置(自定义图标,启动动画,自定义名称)
在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样 第一步: 第二步: 第三步: 到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生 ...
- .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器
目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...
- [HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像
[HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像 干货 JPEG.PNG.GIF有何不同 JPEG适合连续色调图像,如照片:不支持透明度:不支持动画:有损格式 PNG适合单 ...
随机推荐
- offsetleft、offsetTop、offsetParent的兼容性问题
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- C# Gabbage Collecting System
* 这个程序非常巧妙的探测了一下垃圾回收机制,发现如下结论: * 当内存紧急时,才会启动垃圾回收GC.Collect() * 从此程序的运行上来看,delete是连续出现的,这体现了垃圾回收的强度. ...
- UITextView的使用详解
//初始化并定义大小 UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(20, 10, 280, 30)]; te ...
- php学习手记
在学习常量的时候,一直觉得奇怪 为啥常量的时候总是有个“.”在常量的后面,经过学习现在得知该点是 相当于Java当中的“+”用于连接字符 <?php header("Content-t ...
- python基础--基本数据类型考试_day3
1.执行 Python 脚本的两种方式 终端和交互模式 法1:python helloword.py 法2:ps: 执行前需给预chmod 755 helloword.py (linux系统中)./h ...
- ASP.NET 返回字符串 IE6乱码问题
项目A,所有的文件编码和内容编码都是UTF-8. 项目B,Index.aspx文件编码和页面内容编码都是GB2312. 项目A返回JSON格式数据给项目B时,其它浏览器都可以就是IE不行.后来在网上找 ...
- iOS常用---NSArray,NSMutabuleArray
// 创建一个普通的数组,数组中可存储 id(任意)类型 NSArray *array =[[NSArray alloc]initWithObjects:",@"c" ...
- Image Segmentation的定义
Definition 图像分割将一张图分为\(n\)个region, 需要满足下面5个条件 每一个像素都要属于一个region 每个region都是连通的 region与region之间没有交集 re ...
- 离线安装redis集群
Step0:redis集群组件需求 Step1:离线安装ruby Step2:离线安装rubygems Step3:安装rubygems的 redis api Step4:离线安装tcl 8.6 St ...
- dede去掉当前位置position后面的箭头
理论是,dede的当前位置标签{dedefield name='position'},结构是 "首页 > 主栏目 > 子栏目 > ",箭头符号字段数据都是在后台设 ...