导航图片固定高度居中显示小技巧

最新推荐文章于 2022-08-29 17:41:49 发布

喵_美

最新推荐文章于 2022-08-29 17:41:49 发布

阅读量238

点赞数

分类专栏： html 案例

本文链接：https://blog.csdn.net/qq_34708564/article/details/97527794

版权

案例同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

html

21 篇文章 0 订阅

订阅专栏

需求：导航图居中，宽度自适应高度不随屏宽减小而减小，图片不会变小。
1.制作背景图，两边足够长，如下

2.代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .text{
     height: 410px;
     background-repeat: no-repeat;
     background-position:center center;
     /*以下的是为了防止容器高度和图片高度不一致而导致出现空白的区域*/
     background-size:cover;
   }

  </style>
</head>

<body>
 <div class="text" style="background-image: url('22.jpg')" >

 </div>
</body>

</html>

喵_美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航图片固定高度居中显示小技巧

需求：导航图居中，宽度自适应高度不随屏宽减小而减小，图片不会变小。1.制作背景图，两边足够长，如下2.代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .te...
复制链接

扫一扫