html - Clipping the required portion of the image using CSS

Question

Welcome To Ask or Share your Answers For Others

html - Clipping the required portion of the image using CSS

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

html - Clipping the required portion of the image using CSS

So basically I have an image of a sunset I want to use as my banner for my webpage but I just want to use a portion of it, not the whole image. I figured out how to clip the image to the size I want; now I'm just trying to figure out how I can reposition the image so that the portion of the image I want to be seen is displayed in my chosen clip size. Thanks in advance.

<html>

<head>
  <style>
    #banner {
      position: absolute;
      display: block;
      margin-left: 15%;
      clip: rect(8px, 960px, 200px, 0px);
    }
  </style>
</head>

<body>
  <header>
    <img id="banner" src="http://weknowyourdreams.com/images/sunset/sunset-02.jpg">
    <h1>My Travels</h1>
  </header>
</body>

</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:16:00+0000

Applying clipping to elements in CSS is?clip-path

For example:

.element { clip-path: inset(10px 20px 30px 40px); /* Also can take single values to make all sides the same, or 2 values (vert/horz), or 3 values (top/horz/bottom). */ }

Codepen Example : here.

Categories

html - Clipping the required portion of the image using CSS

html - Clipping the required portion of the image using CSS

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags