我使用SVG(白色三角形)作为前伪元素的背景图像,如图所示。如果我将高度设置为与SVG相同的大小,则它不具有半像素线。但是因为我需要这个响应,我已经将背景大小设置为"覆盖" (如果我使用"包含"同样的结果。)
这是我的CSS代码实现带有白色三角形的红色条纹:
#careers{margin:7em 0 0}
#careers a{width:100%;height:auto;overflow:hidden;display:block;-webkit-box-shadow:7px 10px 11px 0 rgba(0,0,0,.16);-moz-box-shadow:7px 10px 11px 0 rgba(0,0,0,.16);box-shadow:7px 10px 11px 0 rgba(0,0,0,.16)}
#careers a img{width:100%;height:auto;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;display:block;z-index:10}
#careers a:hover img{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
#careers .col-md-5{z-index:15}
#careers .careers-holder{padding:0 15% 0 15px;color:#fff;z-index:10}
#careers .careers-holder .btn{width:auto;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block}
#careers::before{content:'';position:absolute;width:calc(100% - 4.1666665%);height:385px;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);background:#d02139 url(http://ranfurlie.website.2018.360southclients.net:8080/img/icon-triangle-white.svg) top right no-repeat;background-size:cover;z-index:1}

<section id="careers">
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-md-1"></div>
<div class="col-md-5">
<a href="<?php echo $careers_link; ?>"><img src="<?php echo $careers_image[0]; ?>" width="705" height="450" alt="Careers" /></a>
</div>
<div class="col-md-5 careers-holder">
<h3>Careers</h3>
<h2>Interested in working for us?</h2>
<p>We are rapidly growing and always need talent to continue our pace. If you’re up for a great challenges and the rewarding career, check out our current positions available.</p>
<a href="<?php echo $careers_link; ?>" class="btn white">Read more</a>
</div>
<div class="col-md-1"></div>
</div>
</div>
</section>
&#13;
这是该部分的HTML:
知道红色半像素的方式或原因是什么? SVG背景图像设置在右上角。
SVG本身可以在这里找到:
http://ranfurlie.website.2018.360southclients.net:8080/img/icon-triangle-white.svg
编辑:我已经在SVG代码中添加了设置宽度和高度,这似乎修复了Firefox的像素问题,但它仍然在Chrome上显示。我没有Mac来测试其他浏览器。答案 0 :(得分:1)
请勿将for read in df.itertuples():
for ref in df2.itertuples():
if np.isclose(read[1],ref[2],atol=10, equal_nan=True) == True:
if np.isclose(read[2],ref[3],atol=10, equal_nan=True) == True:
if np.isclose(read[3],ref[4],atol=10, equal_nan=True) == True:
if np.isclose(read[4],ref[5],atol=10, equal_nan=True) == True:
print(str(read[0])+' match '+str(ref[1]))
和width
添加到SVG元素,或将height
添加到CSS中。 SVG定位和大小调整方式通过属性preserveAspectRatio
:
background-size:cover
它将确保viewBox覆盖整个元素背景并定位,使右上角重合。
(不评估在svg元素上设置的其余属性。)