我遇到了 css 线性渐变的问题。我希望以一定的百分比进行干净的颜色中断。但是当我添加超过一定数量时，它似乎开始模糊颜色：
这是具有“太多”颜色中断的 css 渐变示例 - 并且在不应该的地方模糊：
div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 93%, #ffffff 93% 94%, #ffd900 94% 96%, #ffffff 96% 97%, #042750 97% 100%);
}<div></div>这是一个例子，它有足够的颜色中断，所以它不会模糊：
div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% …所以我正在进行布局并完成了标题.当我开始处理身体内容时,我一直遇到头部与身体重叠的问题,除非我将身体包装的顶部边缘设置为巨大的(300 + px)甚至当屏幕很小时它可以重叠.我想我已经把位置搞砸了,但我似乎无法弄清楚如何克服这个问题.
我的HTML:
<body>
<div id="pageWrapper">
<div id="mainHeader">
<div id="mainNav">
<div id="navContent">
<div class="mainLogo"></div>
<div style="display: inline-block;">
<ul>
<li><a href="#"><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/dashboard.png" />Dashboard</a></li>
<li><a href="#"><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/patient.png" />Patients</a></li>
<li><a href="#"><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/devices.png" />Devices</a></li>
<li><a href="#"><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/account.png" />Account</a></li>
<li><a href="#"><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/support.png" />Support</a></li>
</ul>
</div>
<div class="lvpLogo"><strong>LifeView</strong> Portal</div>
</div>
</div>
<div id="subNav">
<span class="loginName">Doctor Brian Town</span>
</div>
</div>
<div id="bodWrap">
<div class="statWrap"><div class="titleWrap"><span>Chronic Disease Summary</span></div>
<img src="http://lifeview.michiganweb.org/img/icons/support.png" /><img src="img/icons/account.png" /><img src="http://lifeview.michiganweb.org/img/icons/devices.png" /><img src="http://lifeview.michiganweb.org/img/icons/patient.png" />
</div>
<div class="statWrap"><div class="titleWrap"><span>Vital Summary</span></div> …我正在设计一个图像博客，但遇到了一些问题。我能够拉出灯箱媒体项目的“标题”区域，但我无法拉出“alt”区域或“描述”区域。有任何想法吗？
<?php if($attachment->post_excerpt): ?>alt="<?php echo $attachment->post_excerpt; ?>"<?php endif; ?>
（这就是我用来从媒体项目标题区域中提取的内容）
<?php $image = wp_get_attachment_image_src($attachment->ID, 'full'); ?>
<li><a href="<?php echo $image[0]; ?>" rel="prettyPhoto[gallery]" class="hover-gradient" title="untitled"><p style="display:none;"><?php if($attachment->post_excerpt): ?><?php echo $attachment->post_excerpt; ?><?php endif; ?></p><img src="<?php echo $thumbnail[0]; ?>" alt="gallery-blog" /></a></li>
<?php endforeach; endif; ?>
（这是主页大拇指的扩展代码）
我基本上是在寻找一些东西来替换 alt="gallery-blog" 区域，以便它显示媒体页面中的媒体项目 alt 文本