html/css笔记

最新推荐文章于 2022-06-02 09:27:26 发布

没有水勒鱼

最新推荐文章于 2022-06-02 09:27:26 发布

阅读量294

点赞数

分类专栏： java 文章标签：图片 java html css

本文链接：https://blog.csdn.net/sinat_31998357/article/details/49248077

版权

java 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

鼠标悬浮在img上让图片变大

样式：

HMTL代码：

---------------------------------------------------------------------------------------------

如何让一个DIV水平，垂直方向都居中于浏览器？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#mydiv{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-150px;
    width:400px;
    height:300px;
    border:1px solid red;
    }
</style>
</head>

<body>
    <div id="mydiv"></div>
</body>
</html>

_______________________________________________________________________________

网页背景图片自动适应窗口大小的代码

前几天在做一个网页想把一个分辨率比较大的一个背景图片自动适应窗口大小，但是网上搜了下大都是使用

JS控制网页背景随窗口大小自动适应的，而且大都效果不理想，最后终于找到了一个简单的办法本来是想看看css能不能实现背景图片自动适应窗口的的，但是可惜的是在CSS2中，背景图的大小在样式中

是不可控的，比如要想使得背景图填充满某个区域，你要么重新做张大点的图，要么就只能让它以平铺的方

式来填充。想用css3中的background-size吧，但是它现在兼容性不是很好，对于IE来说只能兼容IE9 所以下面我就使用了下面的方法成功的把一个1920x1200的图片自动适应窗口 <body> <img src="./1.jpg" width="100%" height="100%" style="z-index:-

100;position:absolute;left:0;top:0"> 这里是你自己写的其他东西 </body>

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

大家有兴趣的也可以试试！没有什么复杂的脚本也可以实现网页背景图片自动适应窗口大小！

没有水勒鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html/css笔记

鼠标悬浮在img上让图片变大样式： img:hover{ transform:scale(1.02,1.02)}HMTL代码：---------------------------------------------------------------------------------------------如何让一个DIV水平，垂直方向都居中于
复制链接

扫一扫

专栏目录