个人中心
gpt4 book ai didi

html - Easy Div 和线性渐变 CSS

转载 作者：行者123 更新时间：2023-11-28 08:44:20 25 4
gpt4 key购买 nike

奇怪的事情发生了，当我将 div 的高度和宽度设置为 100%(代码片段 #1)时，如果您将 div 尺寸更改为 200px 的高度(代码片段 #2)并且没有宽度，div 显示渐变没问题。有人可以帮助我了解我在这里缺少的东西吗？

片段#1:

    <style>
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: black;
        }

        #grad1 {
            height: 100%;
            width: 100%;
            background: linear-gradient(red, blue);}
    </style>
</head>

<body>

<div id="grad1">
</div>  
</body>

片段#2:

    <style>
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background-color: black;
        }

        #grad1 {
            height: 100%;
            width: 100%;
            background: linear-gradient(red, blue); }
    </style>
</head>

<body>

<div id="grad1">
</div>

</body>

最佳答案

同时将 html 的 width 和 height 设置为 100%。

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  background-color: black;
}
#grad1 {
  height: 100%;
  width: 100%;
  background: linear-gradient(red, blue);
}
<div id="grad1"></div>

关于html - Easy Div 和线性渐变 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27681922/

25 4 0
文章推荐： css - 最后一个导航按钮没有填满其各自的空间
文章推荐： javascript - 除非控制台打开，否则 JS 会失败
文章推荐： javascript - Jquery Animate 效果移动div
文章推荐： css 动画播放状态暂停在 ios 中不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com