0

I'm relatively new to HTML/CSS and have been trying to get a filter over a specific part of my background image. Here is what I have so far that is not working as intended:

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Test</title>

<style>
#test {
    overflow: hidden;
    position: absolute;
    top: 200px;
    left: 200px;
    width: 200px;
    height: 200px;
    border: 5px solid black;
}

test img{
    position: absolute;
    clip: rect(200px,1000px,1000px,200px);
}
</style>
</head>
<body>
    <img src="media/image2.jpg" alt="Test Image">
    <div id="test">
        <img src="media/image2.jpg" alt="Test Image">
    </div>
</body>
</html>

I want the part of the image inside of the black border to be consistent with the background so that I can apply a filter to that image later and make it appear as tough that area has a filter applied directly to it. Please let me know if there is a more simple way to do this. I'm not allowed to use JavaScript.

Ben
  • 19
  • 4
  • What is exactly the problem here? if you want to apply filters to the image in div element, just apply css3 filters such as gray scale. – Farzad Yousefzadeh Oct 10 '15 at 17:26
  • I understand that part. My goal is to get a filter over a specific part of the background. I don't believe that there is a way to do this directly in CSS, so my idea for a work-around was to clip an image to look like it is part of the background, and then apply the filter to that new image. – Ben Oct 10 '15 at 17:29
  • Is there any way you can post an image of the result you want? And, ideally, link to the background-image that you want to use to implement this? And your second CSS selector should be `#test img`, because `test img` is looking for an `` element inside of a non-existent `` element. – David Thomas Oct 10 '15 at 17:31
  • checkout http://stackoverflow.com/questions/19375311/div-blur-of-part-of-backgroung-image-with-css. – Farzad Yousefzadeh Oct 10 '15 at 17:32
  • I did what @DavidThomas suggested and it is working as far as I know. – Ben Oct 10 '15 at 17:42

0 Answers0