将在屏幕上展开的CSS线

Question

我的图像在其两端都有这样的行：

我试图使线条无限大，所以无论我缩小多少，看起来线条来自屏幕的末端，而图像的大小没有变化。

我知道我可以使用repeat-x做一个白线，但是我在尝试让超大div与屏幕重叠而不影响图像方面遇到了麻烦。我使用bootstrap。

这是我的图片代码

<div class="row">
               <div class="col-xl-12 hscentertext" style="">
                 <img src="assets/img/25k.png" class="img-fluid center-block text-xl-center" alt="Responsive image"> 
                <!--  <canvas id="canvas" class="fullonly" width="800" height="133" style="background-color:#D32225"></canvas> -->
               </div>
            </div>

有人可以协助我如何达到这个效果吗？

Answer 1

您可以使用 110％的宽度来实现这一目标，如下所示：

true

Answer 2

我的想法是将你的图像裁剪为没有边框。之后使用CSS：

delimiter ||
CREATE FUNCTION earth_circle_distance(point1 point, point2 point) RETURNS double
    DETERMINISTIC
begin
  declare lon1, lon2 double;
  declare lat1, lat2 double;
  declare td double;
  declare d_lat double;
  declare d_lon double;
  declare a, c, R double;

  set lon1 = X(GeomFromText(AsText(point1)));
  set lon2 = X(GeomFromText(AsText(point2)));
  set lat1 = Y(GeomFromText(AsText(point1)));
  set lat2 = Y(GeomFromText(AsText(point2)));

  set d_lat = radians(lat2 - lat1);
  set d_lon = radians(lon2 - lon1);

  set lat1 = radians(lat1);
  set lat2 = radians(lat2);

  set R = 6372.8; -- in kilometers

  set a = sin(d_lat / 2.0) * sin(d_lat / 2.0) + sin(d_lon / 2.0) * sin(d_lon / 2.0) * cos(lat1) * cos(lat2);
  set c = 2 * asin(sqrt(a));

  return R * c;
end
||

delimiter ;

Answer 3

您可以将图像分成4个垂直部分：

1）空红色空间+白色水平线圆头的几个像素

2）1px宽度的垂直线，用于重复bg中的线

3）带徽标的主要部分

4）空的红色空间+白色水平线的圆形尾部的几个像素

然后你将标记分成5个垂直div：

1,3,5具有固定宽度和居中背景图像

和2,4 - for＆＃34; repeat-x＆＃34; 1像素bg，宽度：calc（50％ - ＃（logo + head + tail）/ 2＃px）; 里面的价值##自己计算