给网页添加图片:

1、background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上

2、background-size不支持IE8

background-size: width height;

background-size: contain;/*迫使图片进行尺寸调整,保持图片的长宽比*/

background-size: cover;/*宽高调整,适应元素,所以经常变形*/

background-size: 100% auto;

3、background-color: yellow;background: url(img.aaaaa.png) no-repeat;与

background: url(img.aaaaa.png) no-repeat; background-color: yellow;是有区别的,在第一中方法中,先设置背景色为黄色,但再执行background的时候,会自动设置默认值为透明,所以背景图片颜色会覆盖黄色

4、在使用背景图片的时候尽量使用css属性background,因为很多其他背景图片的css属性IE8都不支持

5、线性渐变:

background-image: linear-gradient(left,#900 20%,#fc0 30%,#fc0 70%,#900 80%);

/*对于第一种颜色以及最后一种颜色,它是不需要定位,但如果有一个值则表示一种持续状态其余的是告诉浏览器子什么位置上的时候需要进行改变颜色*/

谷歌并不支持这属性,需要加前缀-webkit-

IE9及其之前的版本也都不支持渐变,需要先设置一个背景色

线性重复渐变:background-image: -webkit-repeating-linear-gradient(45deg,#900 0,#900 10px,#fc0 10px,#fc0 20px)

6、径向渐变: (椭圆或者圆形方式渐变)

background-image: -webkit-radias-gradient(20% 40%,circle,red,blue);

/*渐变方向从元素左边20%以及元素上方40%处开始*/

(20% 40%,circle closest-side,red,blue)

/*closest-side从中心点开始一直延续到离中心点最近的那一边,半径也就是中心点到这条边的长度,椭圆则两条边上下以及左右*/

/*closest-corner到最近元素角的距离*/

/*farther-side到最远一边的距离*/

/*farther-Corner到最远角的距离*/

7、如果图片并排排列的时候,如果图片的高度是参差不齐的,则需要使用表格

CSS3-给网页添加图片的更多相关文章

  1. css008 给网页添加图片

    css008 给网页添加图片 1.            css和<img>标签       1.<img>标签是html的添加图片的标签,一般为: <img src=” ...

  2. JS为网页添加文字水印【原创】

    最近需要实现为网页添加水印的功能,由于水印的信息是动态生成的,而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印,而为网页添加文字水印相关资料较少,于是就自己动手写了这个代码. 通常加动态水 ...

  3. delphi WebBrowser控件上网页验证码图片识别教程(一)

    步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...

  4. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  5. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  6. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  7. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  8. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  9. 使用Jsoup解决网页中图片链接问题

    在做Facebook和WhatsApp分享的时候,分享出去的谷歌短链,Facebook获取不到大图,和竞品展示的不一样,WhatsApp分享出去的短链没有图片和描述. WhatsApp: 分析竞品UC ...

随机推荐

  1. va_list使用

    http://www.programfan.com/blog/article.asp?id=41937

  2. 群内大神与你交流WEB经验 业内专家指点就职技巧

    就知道你是一个有理想要抱负的人,不会满足于做一个初级的前端开发工程师.在接下来的这个阶段,我们将走上前端开发的进阶之路,将自己的能力再往上拔高一个等级.同样,薪资也会往上升一个等级!但是,如果你是一个 ...

  3. XMPP框架下微信项目总结(4)重新连接服务器

    xmpp 很多功能是面向模块开发的 例如电子名片 无须自己去写请求的代码XMPP(文件)->Extension(存放的是各个模块)->Reconnect(自动连接模块)          ...

  4. myeclipse相关

    :) MyEclipse 10.7以后开始支持JDK1.7,修改settings下面的配置文件没卵用.

  5. myeclipse 8.5 注册码

    刚才启动突然发现MyEclipse原来是收费的...汗一把,到弹出注册框我才知道.....老天啊我活的该有多窝囊.. 弹框很烦人,我一个穷书生既想继续学习又囊中羞涩无力购买,只好用盗版了(找个理由辩解 ...

  6. EF – 6.一对一关联

    5.6.6 <一对一关联概述>  5.6.7 <一对一关联CRUD演示>  在两讲视频中,首先介绍了数据库中一对一关联表的设计规范,接着通过实例介绍了如何合适Entity Fr ...

  7. Feature hashing相关 - 2

    Bloom filter     思路 用多个不同hash 来记录,比如遇到一个 love 有4个hash function 映射到4个bit位置,如果所有位置都是1 那么认为之前已经遇到love这个 ...

  8. SSIS Dataflow使用存储过程不能检索列名

    在项目中遇到一个问题,需要在Dataflow中调用一个存储过程,然后把结果生成一个csv文件. 然而在dataflow调用存储过程中遇到了问题,SP不能正确的返回列名. 在SSMT里面明明是可以查出数 ...

  9. hdu 4055 递推

    转自:http://blog.csdn.net/shiqi_614/article/details/7983298 题意:由数字1到n组成的所有排列中,问满足题目所给的n-1个字符的排列有多少个,如果 ...

  10. Objective-C编码规范:26个方面解决iOS开发问题(转)

    链接