有没有办法用 css 或 jquery 删除或隐藏图像的一部分

Posted 2023-02-25

【中文标题】有没有办法用 css 或 jquery 删除或隐藏图像的一部分

【英文标题】：Is there a way to remove or hide a part of an image with css or jquery

【发布时间】：2018-11-07 10:23:31

【问题描述】：

我正在制作一个具有特定背景图片的网站。当它改变屏幕尺寸时，我需要移除图像的中间部分，以便图形看起来更苗条。这是图片。

现在是这样的：

这就是我在屏幕更改为平板电脑时需要它的方式：

我的html：

<section class="hero" style="background-image: url(./images/hero.png)">
<header class="header">
  <img src="./images/logo.png"  class="logo">
  <div class="shape hamburger">
    <!-- <a href="javascript:;" class="line-shape"><span class="hide">Hamburger icon</span></a> -->
    <a class="line-shape" href="javascript:;"><span></span><span class="hide">Hamburger icon</span></a>
    <span class="shape-txt" >MENU</span>
  </div>
</header>
<div class="row">
  <div class="col col-2 offset-2 col-2-t offset-2-t">
    <h1 class="section-title">
      Living our values
      Transforming our business
    </h1>
    <p class="txt">
      UDG Healthcare plc</br>
      Annual Report and Accounts 2015
    </p>
    <a href="javascript:;" class="padded"><span class="s s-down-arrow"><span class="hide">download</span></span>Download Full Report <span class="no-under">(PDF, 2.5 MB)</span></a>
  </div>
</div>
<span class="above-btn">Explore our year</br>
    in review</span>
<button type="button" class="down"><img src="./images/down.png" ><span class="s s-down-arrow btn-arrow"><span class="hide">Move Down</span></span></button>

我的CSS：

.hero 
  background-repeat: no-repeat;
  background-size: cover;
  background-color: $hero-bg-cream;
  overflow: hidden;

  .row 
    margin: 0;
  

  h1 
    padding: 106px 0 7px;
    line-height: 1.15;
    word-spacing: 5px;
    letter-spacing: 0px;
    width: 70%;
    font-size: 40px;
    color: $grey;
  

  .txt 
    line-height: 19px;
    padding-bottom: 14px;
    color: $grey;
  

  .padded 
    padding-bottom: 421px;
  

  .s-down-arrow 
    &:last-child 
      left: -38px;
      color: $grey;
      top: 0;
    
  

  .above-btn 
    font-size: 14px;
    text-align: center;
    display: block;
    padding-bottom: 16px;
    color: $grey;
  

  .down 
    transform: translateX(13%);
  

  @include breakpoint (tablet) 
    h1 
      font-size: 29px;
      padding: 217px 0 7px;
    

    .txt 
      padding-bottom: 10px;
    

    .padded 
      padding-bottom: 308px;
    

    .down 
      transform: translateX(10%);
    
  

我想我需要删除图像的右侧部分或类似的东西？

【问题讨论】：

很难从你的截图中看出你真正想要改变什么以及在哪里......甚至是从哪个图像开始，女人的脸，多色戒指由三角形组成，还是两者兼而有之？

@misorude 所以当屏幕从台式机变成平板电脑时，女人和戒指之间的背景图像空间需要变小。女人和戒指需要靠得更近。希望这是有道理的..

那么，您最好使用两张单独的背景图片，每张一张，这样您就可以将它们放在更近或更远的位置……

所以唯一的解决方案是每次屏幕更改时都更改图像..这正是我不想做的：D

没有人提到“每次”……你使用两张背景图片，一张给女士，一张给有形的东西——然后你操纵背景位置（可能还有大小）在你的断点之间……

【参考方案1】：

您可以在 HTML 中执行此操作：

<section class="hero" style="background-image: url(./images/hero.png); background-size: 100% 100%;">

或者在这里，在 CSS 中

.hero 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: $hero-bg-cream;
  overflow: hidden;

  .row 
    margin: 0;
  

【讨论】：

真的没用.. 图像只是在左下角变得非常小

@BojanKolano 我已经修改了我的解决方案。

这会拉伸图像并将其定位在顶部。我确实设法用 bg-position x 和 y 做一些事情。我确实得到了我想要的，但现在我在顶部有一些空白空间

背景重复：不重复；背景大小：161% 609%；背景颜色：#e5eaea；背景位置-x：-56px；背景位置-y：37px；溢出：隐藏；

我用的就是这个

【参考方案2】：

好的，所以解决方案是制作background-size: auto;

【讨论】：

这不会在所有屏幕尺寸上修复它。背景尺寸：自动；只需将背景大小设置为图像的原始大小。

啊，是的，我刚看到...我需要它小一点，它的大小是一样的..