All elements on my webpage are enhanced with a CSS filter

I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening?

HTML

<body>
    <div class="button">
        <a href="#">START EXPERIENCE</a>
    </div>
</body>

CSS

html { 
  background: url(../img/cover2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
  // Browser Specific
  -moz-filter: brightness(0.5);
  -o-filter: brightness(0.5);
  -ms-filter: brightness(0.5);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.button {
    position: absolute;
    left: 40%;
    top: 50%;
    -webkit-filter: none;
}

.button a {
    text-decoration: none;
    border: 2px white solid;
    color: white;
    padding: 25px;
    padding-left: 100px;
    padding-right: 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 22px;
}

.button a:hover {
    background: white;
    color: black;
    color: rgba(0, 0, 0, 0.5);
}
htmlcss

Answer №1

When you apply a style to the HTML tag, it will affect all other elements within your HTML document. It is typically not recommended to directly style the HTML tag itself as this can have unintended consequences.

Keep in mind that any elements nested within the parent element where the style is applied will also inherit the styling changes.

Answer №2

Applying the technique below to a single div can also be extended to the entire page.

View Codepen Demo

HTML

<div class="wrapper">
  <img src="http://lorempixel.com/400/400/sports/1/" alt="" />
    <div class="button">Some Text</div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    width:400px;
  height:400px;
  margin:25px auto;
  position: relative;
}

.wrapper img {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  -webkit-filter: brightness(0.5);
  // Browser Specific
  -moz-filter: brightness(0.5);
  -o-filter: brightness(0.5);
  -ms-filter: brightness(0.5);
    filter: brightness(0.5);
}

.button {
  position: absolute;
  top:50%;
  left:50%;
  -wekbit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  color:black;
  font-weight: bold;
  border:1px solid white;
  padding:1em;
  background-image: url(http://lorempixel.com/400/400/sports/1/);
  background-position: center center;

}

Answer №3

Enhance your background image by adjusting its opacity to 0.5 in Photoshop. Keep the html tag untouched and designate this modified image as the background for your body

Answer №4

<body>
    <i class="shadow"></i>
    <div class="button">
        <a href="#">START EXPERIENCE</a>
</div>
</body>

css 

body {
  background: url(http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.shadow{
  position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(255, 0, 0, 0.5);
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
  -moz-filter: brightness(0.5);
  -o-filter: brightness(0.5);
  -ms-filter: brightness(0.5);
}

.button {
    position: absolute;
    left: 20%;
    top: 50%;
    z-index:2;
}

.button a {
    text-decoration: none;
    border: 2px solid white;
    color: white;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 100px;
    padding-right: 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 22px;
    text-align:center;
    white-space:nowrap;
}

.button a:hover {
    background: white;
    color: black;
    color: rgba(0, 0, 0, 0.5);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular and HTML calendar picker

Is there a way to display a date in an HTML input type="date based on a variable stored in my ts file? The variable ScreenDate is defined in my ts file. <input type="date" [(ngModel)]="ScreenDate"> I tried the above code but it did not work as exp ...

htmlangulardate

Can someone show me how to verify in PHP (using codeigniter) if the following two rows contain any data?

I need to verify whether the following TWO rows or ID are not NULL. If there are no consecutive TWO rows or ID, then the income will stay at zero. foreach ($data as $row) { if(($row->id + 2) != NULL) //I am unsure about the c ...

phphtmlsqlcodeigniter

Dynamically indicate the destination for AJAX success feedback across various forms

Here are a couple of inquiries: Is there a way to incorporate a second form on the same page and dynamically handle each form based on which submit button is clicked? Let's say I have several forms on one page. How can I alter the output destina ...

javascriptphpjqueryhtmlajax

Override the class inside the ul div

I am utilizing Dreamweaver's Spy menu without any sub items. By using a background image for "not active", another for "rollover" and attempting to apply one for "active". I have created a class for "active" and assigned it to one of the ul items. How ...

htmlcss

Show the text area content in an alert when using Code Mirror

When I try to alert the content of a textarea that is being used as a Code Mirror on a button click, it appears blank. However, when I remove the script for Code Mirror, the content displays properly. I am puzzled about what could be causing this issue wi ...

javascriptjqueryhtmlcodemirror

Utilize HTML to pre-load a font and incorporate it into your CSS styling

It is common knowledge that when we include the following code in our .css file: @font-face { font-family: "Akrobat-Regular"; src: url('/assets/Akrobat-Regular.otf') format("truetype"); } body { color: #1c1c1c ...

htmlcssfonts

Links have a longer transition delay compared to the content

In a unique JavaScript function I've developed, the my-content-section-visible class is removed and replaced with my-content-section-hidden. This change is being made to hide a particular div using a smooth transition effect. The transition itself is ...

javascripthtmlcss

Conceal and reveal content using jQuery

I'm struggling with creating a functionality to hide and show content when a user clicks on a button (checkbox). I've written some code but it's not working as expected. The issue is that the content doesn't hide when the checkbox is cl ...

jqueryhtmlcheckbox

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

phphtmlcssanimation

Unable to apply a dotted border to a horizontal rule when a Bootstrap 5 link is present

As I strive to add a dotted border-style to the horizontal rule on my website, an interesting challenge arises when the Bootstrap-5 CDN is included. The border-style does not take effect as expected. Even on Codeply, the border-style works perfectly until ...

htmlcsswebbootstrap-5

Determine the latest date within each group and display the corresponding output value

I am seeking a way to showcase only the most recent value for each group. For example, in the CSV data provided below, the total amount of Bagels in the Cinnamon Raisin variety were collected during three different sampling periods: May 2017, March 2017, ...

javascripthtmljsond3.js

How can you position a table above a div in HTML and jQuery without using absolute positioning?

I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...

jqueryhtmlcss

The image sits on the edge of the container, not fully contained

.sub2 { background-color: #FFFFBF; margin-top: 30px; height: 410px; width: 100%; } h1.sub2 { font: bold 100px american captain; text-decoration: underline; float: right; } p.sub2- { font: italic 25px american captain; margin-top: -300px; ...

htmlcss

Modify the border in jQuery if a specific div exists within a list item

Here is a collection of items: <div class="wine"> <H1>Title</H1> <div class="promotion"></div></div> <div class="wine"> <H1>Title</H1> </div></div> <div class="wine"> <H1>Title& ...

javascriptjqueryhtmlcss

Bootstrap4: What could be causing the adjacent row cell to remain left-justified instead of being centered as intended with mx-auto?

I've been working on creating a responsive header using Bootstrap4. The main goal is to have the logo displayed as left-justified text and the menu items as right-justified when the viewport is large, then transition to both being centered in a "small ...

htmlcssbootstrap-4flexbox

Tips for preloading content into a Bootstrap markdown editor

My issue involves using bootstrap markdown and figuring out how to convert the text area content from parsed HTML. Adding text using markdown is not a problem initially, but when it comes to editing, I find myself needing to manually input what I had orig ...

htmltwitter-bootstrapmarkdown

Activate validation checks when the Div is loaded

I have a situation where I have multiple divs on my page, with only one visible at a time due to the use of an update panel. Within the third div, I need to implement validations using jQuery. <script src="http://ajax.aspnetcdn.com/ajax/jquery.valida ...

jqueryvalidationhtmlonload

Issues with Collision Detection between Canvas Rectangles and Balls

I am developing an HTML5 canvas game and encountering an issue with collision detection. The problem occurs when the ball collides with any platform - the ball's gravity should change to -1 and move upwards at the same velocity as the platforms. Howev ...

javascripthtmlcanvascollision-detection

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

htmlw3c-validationsemantic-markup

Grids designed in the style of Pinterest

Seeking advice on aligning divs in a Pinterest-style layout. Currently, my setup looks like this: https://i.sstatic.net/erlho.png But I want it to look more like this: https://i.sstatic.net/K9FnD.png Would greatly appreciate any tips or suggestions on ho ...

javascriptjqueryhtmlcss