先来一段有问题的代码（其实也不能说是有问题，毕竟语法上是没问题的，只是出来的效果不是我们想要的??我们假设预期的效果是背景图片只填充一次而不是多次。） 设定表格的背景图像 姓名 张三 性别 男 年龄 20 页面效果是： 我们稍微修改一下标签的属性就可以让图片只出现一次??通过styl...
现在遇到一个兼容性问题，IE6下onclick切换a标签的背景图片，样式已经改了，但是背景图片没有改变，需要鼠标移出移入背景图片才发生变化。这要怎么改，来实现触发click事件后立即修改背景图片。PS:改成span能实现此效果，但会有其他问题出现，所以还是用a标签。 回复讨论(解决方案) 这肯定不是兼容的问题，一定是你代码有问题。 其他浏览器就没有这种问题 用js直接修改了img 的src属性吧？记得IE6下确实有问题的，可...
div背景透明样式： 样式代码： .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity: 1.0; height:300px; width:500px; background:#ccc; left:50%; top:50%;margin-top:-150px;margin-left:-250px;position:absolute;z-index:99; text-align:center; padding:20px;} 使用方法： 背景透明 html代码： Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
自己做了一个网站，需要用到弹出框的功能，以前没做过这个，就去网上查了下资料，然后试着写了一个最简单的弹出框效果。 需求：点击弹出框按钮，在原页面基础上弹出一个弹出框，并且背景要变成灰色，原页面不能被编辑知道关闭弹出框。 原理：在原页面的基础上添加两个div，一个是弹出框，一个是弹出框后面的背景层（页面变灰）。首先这两个div是跟原页面的代码在一起存放的，只不过使用了display：none这个css属性先将其隐藏不显...
css3：linear-gradient 比如：黑色渐变到白色，代码如下： .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); ...
正确写法 .custom-topNavigation_shadow { width: 1024px; height: 115px; background: url(Images/document-block-main.png) repeat-x 0 -380px; } IE8或以下不支持的写法，IE9或以上支持，有误的写法 .custom-topNavigation_shadow { width: 1024px; height: 115px; ...
css3的gradient分为两种：线性渐变（linear）和径向渐变（radial）。 一、线性渐变linear-gradient linear-gradient([设置方向]，[设置开始颜色]，[设置多种过度颜色]，[设置结束颜色]) 参数： 第一个参数：指定渐变方向，可以用“角度”的关键字或“英文”来表示： 第一个参数默认：180deg，等同于“to bottom”。 后面的颜色至少有2个，即开始颜色和结束颜色。 举例： p{ width: 300px; height: 100p...
当我使用背景图片时，无论怎么调整，总是无法横向铺满整个屏幕。 但是我使用背景颜色时，总是能横向铺满整个屏幕。 下面是代码和运行效果： 1，使用背景图片 代码： #d1{ background-image: url(css1.png); background-repeat: repeat-y; position:fixed; right:0px; top:300px; } Class.forName("com.mysql.jdbc.Driver"); Connection co...
最近在负责一个微信H5 App项目，遇到一个郁闷的问题，手机浏览器查看网页时图标都是模糊的，有锯齿，电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题，后来网上查找了一些办法，大部分的解决方案都是设计一套放大1倍的图标，再压缩显示。 我们都知道标签可以通过固定宽高的方式来压缩大图，从而得到高清的显示效果，而图标一般用背景图来呈现，怎么搞呢？好吧，css3出了一个很牛逼的属性background-size可以直接设置背...
废话当然不说了。直接上代码 #mycon { background:url('Tpl/1.jpg'); background-size:400px 400px; background-repeat:no-repeat; border-radius: 4px; border: 1px solid #ccc; width: 400px; height: 400px; } 原来背景图大小：970*630 这里才是战场,以缩略图的形式来将背景图设置 background-size:400px 400px;后面是设置缩略图宽和高。 效果如图：
CSS3 background-origin 可以将图片定位于：padding 或者padding里头，甚至是边框。 所以他有三个值：content-box、padding-box 或 border-box content-box border-box padding-box 自习去发现 boder-box 和padding-box 是有却别的
IMG标签本身是显示图片的，但通过CSS可以再为其设置背景图片，让其和自身的图片配合来显示，最终的效果会让你惊叹。当然，这个发现来自于老外，所以代码马上与大家分享。再此之前，我也从来没有想到过这个思路，我想这种思路可以应用的地方相当多了。 CSS奇特用法：为IMG设置背景图片div {background: url('http://www.codefans.net//jscss/demoimg/201312/blur.jpg') no-repeat top left;width:232px;height: 200px; }img {...
CSS3感应鼠标的背景闪烁和图片缩放动态效果/*标题背景*/h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;}h2:hover{-moz-animation:bg .5s ease-in-out;-webkit-animation:bg .5s ease-in-out;}h2,a{cursor:pointer;margin:10px auto;}@-moz-keyframes bg{0%{background:rgba(144,24,53,0.18);}25%{background:rgba(144,24,53,0.5);}50%{background:rg...
与背景相关的新增属性 大家都知道在HTML页面中，元素都是由以下几部分组成 使用background-clip来修改背景的显示范围，如果设定为border-box，则背景范围包含边框区域，如果设定为padding-box则不包含边框,包含padding区域。如果设定为content-box则背景只包含内容区域 background-origin属性：指定绘制背景图像的绘制起点，它的属性值跟background-clip是一样的，也就是说你可以通过它的指定绘制时从边框的左上角开始...
如何用css背景图片拉伸 以及100% 满屏显示呢？这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类： 1.是一整张大图，尺寸和区域大小刚好吻合 2.一个很小的条...