css3图片样式,css样式背景图片代码

css3怎么实现头像图片像QQ那样一闪一闪

@-webkit-keyframes twinkling{

  0% {

      opacity: 0; 

  }

  100% {

      opacity: 1; 

  }

}

#110 {

    -webkit-animation: twinkling 1s infinite ease-in-out; 

}

参考如上。

稍微解释一下，定义两个状态，一种状态下透明度为 0%，另一种状态下透明度为 100%，无限次地在 1 秒内切换这两种状态，看起来就是闪烁了。

相关问答

Q1: CSS3样式中如何让背景渐变与背景图片共存？

目前，对CSS3支持日趋完善，实现兼容性的渐变背景效果是完全可以的，让背景渐变与背景图片共存的方法很简单，主要要注意的是图片要 保持“最小单元”的准则，选择正确的浏览器，该问题就能得到解决，下面介绍一下具体的解决方法。

1、图片渐变切图时一定要以最小为准则，例如在做垂直方向的纯颜色的渐变时，尝试使用1个像素的竖直图片作为渐变背景“最小单元”。另外，要注意css3虽然支持很多的浏览器的兼容，但是目前不支持Opera浏览器。

2、如果兼容程度允许的话，纯色渐变背景可以使用css3的渐变样式，如{background: linear-gradient(left top, red , blue);}，如此一来能够减少切图量，还可以加快网页加载速度，缺点是使用主流浏览器的话，就必须要添加前缀。

3、注意对于webkit核心的浏览器，如Chrome/Safari浏览器，在这些浏览器下要做到渐变背景，也需要使用CSS3 渐变方法，css-gradient，具体就是-webkit-gradient，使用语Firefox浏览器业是有一点差异的。

Q2: Css3——background属性详解

background ：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。

颜色名称，如： background-color:red ;

十六进制背景色，如： background-color:#f00; ;

rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，

如： background-color:rgb(255,0,0.3); ;

特殊值：transparent，透明色： background-color:transparent ;

background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。

一张图片： background-image: url(img/a.jpg);

多张图片： background-image: url(img/a.jpg),url(img/b.jpg);

特殊值：none，不显示背景图像

background-image: none;

background-repeat 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

常用的4个值：

repeat：水平和垂直方向都重复图像， background-repeat: repeat;

repeat-x：水平方向重复图像

repeat-y：垂直方向重复图像

no-repeat：图像不重复

规定背景图像是否固定或者随着页面的其余部分滚动。

scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认

fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动

background-attachment: fixed;

第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。

例如： background-position: right； 代表背景图右侧，垂直方向居中的位置。

百分比位置，如：background-position: 20% 20%;

具体像素位置， 如：background-position: 20px 20px;

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

单张图片的背景大小可以使用以下三种方法中的一种来规定：

当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

每个值可以是length, 是 percentage, 或者 [auto] 。

示例：

为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。

CSS部分 背景图片分辨率为427*640

分别给box的background-size属性添加不同的属性值，会产生不同的效果。

1、长度 ：可以用px、em、rem等指定背景图片大小，不能为负值。

background-clip 裁剪，通常和background-origin一起使用，决定设置元素的背景（背景图片或颜色）是否显示。

注：background-clip只是将背景和背景色粗暴的裁剪。

该属性有四个值

border-box

背景延伸至边框外沿（但是在边框下层）。 background-origin: border-box;

background-origin 规定了指定背景图片[ background-image ] 属性的原点位置的背景相对区域.

border-box

背景图片的摆放以border区域为参考

padding-box

背景图片的摆放以padding区域为参考

content-box

背景图片的摆放以content区域为参考

样式：

先看一下background-origin属性。

先看一下background-clip属性。

这就印证了background-clip只是将背景和背景色粗暴的裁剪。

好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。

欢迎大家一起交流，讨论。

Q3: 用css3如何让安卓机上面的图片变成圆形

css3的圆角样式

border-radius就可以做到了，

圆形，就把四个角都设置成宽高的一半，就是50%，或者是固定值，，

注意的是，如果你是直接用Img标签的话，那你的Img

宽高要一样，就是说要是正方形，

如果你是通过容器来实现的话，你就直接把容器设置成正方形，border-radius:50%;然后再background图片就可以了。

Q4: html5 css3样式图标怎么做

html5 css3样式图标制作方法：

1、html代码：

div id="boxes"

div id="boxShortcode"border-radius: 40px (shortcode)/div

div id="box1"border-top-right-radius: 40px (same on both axis)/div

div id="box2"border-top-right-radius: 20px 40px (x y) /div

div id="box3"border-top-right-radius: 40px 20px (x y) /div

/div

2、css样式代码：

#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }

#boxShortcode {

background: cyan;

border-radius: 40px;

}

#box1 {

background: red;

border-top-right-radius: 40px;

}

#box2  {

background: yellow;

border-top-right-radius: 20px 40px;

}

#box3 {

background: lime;

border-top-right-radius: 40px 20px;

}

3、运行结果：

Q5: 怎样在css中改变图片格式和形状

图片格式代表的是一种资源类型，css是用来修饰网页展现的

css可以通过对控制对图片的宽高或者外层容器的宽高来改变图片大小或者显示部分

在css3中图片是可以修饰容器边框的，这也是改变图片的一种形式

图片可以作为容器背景，控制背景的显示方式来改变图片的形状拉伸、收缩、平铺等

css3中引入了2d、3d转换动画也是图片形状改变的一种展现

当然更多的形状变化方式题主可以参考css手册进行以上基础的进一步扩展