Question

我希望使用CSS删除图像的一角。我目前通过调整图像来实现这一目标，但我宁愿学习如何正确地做到这一点。

这是将图像购买到我想要实现的页面。我的想法是使用带有CSS的完整图像来剪切角落

http://goos3d.ie/home-2/

Answer 1

您可以选择存档此效果：

剪辑路径

使用CSS clip-path来切割边缘。这种技术就像在Photoshop中使用蒙版一样。不幸的是，这个属性相对较新，需要在较旧的浏览器中使用

图片蒙版

您可以创建另一个用作蒙版的图像并将其放在图像上：

<div class="image">
    <img src="path/to/mask.svg" alt="" class="image-mask">
    <img src="path/to/image" alt="">
</div>

.image {
    position: relative;
    overflow: hidden;
}

.image-mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

DIV元素

使用DIV元素创建一个角并将它们放置在您的图像上：

<div class="image">
    <div class="image-corner image-corner-top-left"></div>
    <div class="image-corner image-corner-top-right"></div>
    <div class="image-corner image-corner-bottom-left"></div>
    <div class="image-corner image-corner-bottom-right"></div>
    <img src="path/to/image" alt="">
</div>

.image {
    position: relative;
    overflow: hidden;
}

.image-corner {
    background-repeat: no-repeat;
    heigth: CORNER_HEIGHT;
    position: absolute;
    width: CORNER_WIDTH;
}

.image-corner-top-left {
    background-image: url('/path/to/corner-top-left');
    left: 0;
    top: 0;
}

.image-corner-top-right {
    background-image: url('/path/to/corner-top-right');
    right: 0;
    top: 0;
}

.image-corner-bottom-left {
    background-image: url('/path/to/corner-bottom-left');
    bottom: 0;
    left: 0;
}

.image-corner-bottom-right {
    background-image: url('/path/to/corner-bottom-right');
    bottom: 0;
    right: 0;
}

Answer 2

您所看到的宇航员图片不涉及图像的任何剪裁。图像仍然存在，但图像的某些部分是使用css规则隐藏的

看看源网址中的图片。是的，它仍然存在，但部分内容隐藏在网站上

现在您可以使用css简单地复制此行为得到一些＆＃34;剪辑＆＃34;仅使用css

将背景图片添加到div background:url("....")

使用background-position规则

对图像进行发布

请参阅下面的代码段

＆＃13;

#astro {
  width: 500px;
  height: 500px;
  border: solid;
  background: url("http://goos3d.ie/wp-content/uploads/2016/11/goos3d-moon-large2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -400px 0px
}

＆＃13;

<div id="parent">
  <div id="astro"></div>
</div>

＆＃13;

Answer 3

两个简单的步骤：

首先您需要将以下样式应用于具有背景图片的容器<div>：

.vc_parallax-content-moving-fade
{
    border-bottom-right-radius: 100% !important;
    overflow: hidden;
}

第二 由于上述样式，橙色按钮将被隐藏，因此您需要将橙色按钮放在具有背景图像的容器之前。

然后给它以下样式：

.vc_btn3
{
    z-index: 9999;
    right: 0;
    position: absolute;
    top: 300px;
}

用css删除图像的一角

3 个答案: