如何在html中删除歪斜后的空白点？我试图在HTML中结合两张图片，但是我看到在CSS中使用SigWy后的空白点。如何使底部图像和白色斑点结合起来以适合设计视图_Html_Css_Image

如何在html中删除歪斜后的空白点？我试图在HTML中结合两张图片，但是我看到在CSS中使用SigWy后的空白点。如何使底部图像和白色斑点结合起来以适合设计视图

html css image

如何在html中删除歪斜后的空白点？我试图在HTML中结合两张图片，但是我看到在CSS中使用SigWy后的空白点。如何使底部图像和白色斑点结合起来以适合设计视图,html,css,image,Html,Css,Image,下面是HTML。我正在将图像1添加到中，将图像2添加到 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="HTMLPage2.css"> <meta charset="utf-8" /> <title></title> <

下面是HTML。我正在将图像1添加到

中，将图像2添加到

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="HTMLPage2.css">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <div class="header__bg"></div>
        <h1>test</h1>
    </header>

    <section class="main_image">
    <h1>Section Content</h1>
    </section>

</body>
</html>

我看到图像之间的白色部分，我想白色部分是底部图像的一部分。有什么方法可以做到这一点吗？

有几种方法可以满足您的需求

注意：为了更好地说明，我刚刚使用了两个来自互联网的随机图像样本

带负值的边距：

首先，您可以尝试

边距顶部：一些负值

（在我的示例中，我刚刚使用了-77px）并添加了

z-index:1到上部图像，并标题h1
，以确保其始终保持在下部图像的顶部。（在这种方法中没有必要使用z-index
）

标题{
位置：相对位置；
高度：300px；
溢出：隐藏；
}
.header\uu bg{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
宽度：100%；
身高：100%；
背景图像：url（“https://www.cranfield.ac.uk/~/media/images for new-website/rio/ktp/clear-water-drops-pexels-400x400.ashx？h=400&w=400&la=en&hash=18C2E8C4D228436DBA9414C59FBDFF01268A6681”）；
背景重复：无重复；
变换：歪斜（-6度）；
变换原点：左上角；
z指数：1；
}
第3.2节主图像{
背景图片：url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a704f043-a0fb-4652-b8ee-6bc362dae5a9/d5j1z44-0c21f546-39eb-48f9-8230-0b4500c7b88f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E3MDRMMdqzlwewzmitndy1MmRhzTvzdVqmxOn0Nc0WyzixZJu0Ni0ZOwViltq4ZjkToDizMc0WyjQ1MDBjN2i4OgYuanBn2i4OgYuan1dxBn2OgyuandxSwiyxVkijpbinVyBjxXj2awnlomzpG93BmxyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyWyW；
背景重复：无重复；
利润上限：-77px；
}
h1{
保证金：0；
填充：100px0；
字体：44px“Arial”；
文本对齐：左对齐；
利润率：35px；
}
收割台h1{
位置：相对位置；
颜色：白色；
z指数：1；
}

测试
章节内容
因为我们有两个不同的标记元素，我想你可以通过边距顶部：一些负值来实现这一点，将你的第二张图像拉到顶部。但是如果你能提供一些图像或你期望做的事情，我们可以帮你做得更好！这是我现在想要得到的输出。好的，你可以检查我的答案，并让我知道它是否适合你。谢谢。这对我帮助很大！
header {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.header__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("GettyImages2.jpg");
    transform: skewY(-6deg);
    transform-origin: top left;
}
section.main_image {
    background-image: url("GettyImages1.jpg");
}


h1 {
    margin: 0;
    padding: 100px 0;
    font: 44px "Arial";
    text-align: left;
    margin: 35px;
}

header h1 {
    position: relative;
    color: white;
}