CSS3-给网页添加图片
给网页添加图片:
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-给网页添加图片的更多相关文章
- css008 给网页添加图片
css008 给网页添加图片 1. css和<img>标签 1.<img>标签是html的添加图片的标签,一般为: <img src=” ...
- 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 ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- 使用Jsoup解决网页中图片链接问题
在做Facebook和WhatsApp分享的时候,分享出去的谷歌短链,Facebook获取不到大图,和竞品展示的不一样,WhatsApp分享出去的短链没有图片和描述. WhatsApp: 分析竞品UC ...
随机推荐
- 【leetcode】Combination Sum III(middle)
Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...
- 【leetcode】Insert Interval(hard)★
Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
- 【QT】C++ GUI Qt4 学习笔记5
折腾了好几天,终于把这本书的第三章和第四章给看了个大概. 里面的函数调用关系可谓是复杂. 整理了一部分的函数关系如下: cell关系清理 data(role) 返回应该显示的值 或者对齐方式 或者公式 ...
- 如何获得images.xcassets 中图片的路径?
UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 重点: Images.xcassets中的图片资源只能通过imageNamed:方法加载,通过NSBundle的pat ...
- .Net SqlDbHelper
using System.Configuration; using System.Data.SqlClient; using System.Data; namespace ExamDAL { clas ...
- sql 查询表的所有详细信息
SELECT (case when a.colorder=1 then d.name else '' end) as 表名,--如果表名相同就返回空 a.colorder as 字段序号, a.nam ...
- mongodb3.x用户角色
用户和角色是多对多的关系,一个用户可以对应多个角色,一个角色可以拥有多个用户.用户角色的不同对应的权限也是不一样的.下面是一些分配给用户的常见的角色. read ...
- js中Number对象与MATH方法整理总结
W3C的文档: Number 对象属性 属性 描述 constructor 返回对创建此对象的 Number 函数的引用. MAX_VALUE 可表示的最大的数. MIN_VALUE 可表示的最小的数 ...
- 解的个数(codevs 1213)
题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c = 0 p<=x<=q r<=y<=s 求满足这些条件的x,y的个数. 输入描述 Input ...
- C#资源文件管理
1.右键项目点属性; 2.点资源项,添加资源下拉框的添加现在文件,如下图: 3.直接上代码获取并复制到指定文件夹下: private void button1_Click(object sender, ...