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

Develop a reusable block of Vue template when creating a new component

There are times when I find myself needing to repeat certain sections of HTML code in my Template just to keep it DRY. However, creating a new component and passing multiple props and dynamic data seems like too much work. Is there a simpler way to define ...

htmltemplatesvue.jsdryextends

Thumbnail Carousel Caption in Bootstrap 3

Is it possible to create a Bootstrap 3 carousel where the image changes when the mouse cursor hovers over the thumbnail under the carousel? Currently, I have a setup with the carousel and thumbnails below it. Typically in Bootstrap, the image changes autom ...

javascriptcsstwitter-bootstrap

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

htmlcss

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Javascript Steps to trigger a function when selecting the Stay on Page option in Google Chrome

If you're testing my code in the Chrome Browser, hitting refresh will prompt you with 2 options. Leave This Page Stay on This Page By clicking on the Stay on this page button, it should trigger my custom function displayMsg(). Can anyone pr ...

javascriptjqueryhtml

How can line breaks be displayed in JavaScript text output?

I need assistance with creating a scrolling series of text messages that are separated by linebreaks. This is the current code I have: <script type="text/javascript" src="xbMarquee.js"></script> <script type="text/javascript"> <!-- ...

jqueryhtmlline-breaks

unable to obtain desired font in the final result

I have encountered an issue where the certificate theme I am storing in the database as HTML appears fine in the browser output, but when fetched and displayed in a PDF format, the normal font output is shown instead. I am unsure of what I might be doing w ...

phphtmlcssfontsthemes

How to interact with a button inside a span element without an ID using Selenium

Can anyone help me figure out how to click a button in the browser using Selenium and Python? The button I am trying to click is located within this HTML code: <div id="generate"> <i class="fa fa-bolt"></i> <span>D ...

pythonhtmlselenium

Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want. Javascript:` var container = document.querySelector('#container'); var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item' ...

htmlcssimage

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

jquerycsszurb-foundation

The HTML video controls in Safari take precedence over the window.name attribute

When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...

javascripthtmlsafari

Customize Your Lists in Wordpress to Reflect Your Unique Style

I need help with styling a specific text widget in Wordpress by adding a FontAwesome icon as a list bullet. I have the following CSS code: .covenant li { counter-increment: my-awesome-counter; margin: 0.25rem; } .covenant li:before { font-family: 'Fo ...

htmlcss

After sending a post request, the form in HTML with Node.js is returning an undefined response

Upon creating an HTML <form></form> object to capture a username, email, and password, I encountered an issue where the value returned is always undefined when accessing req.body.name or any other field. It seems like the form is not functionin ...

htmlnode.jsforms

Updating Navigation Bar Font

I am a novice in the process of constructing my own navigation bar for my website, and I am encountering difficulties when trying to customize the font (color, font-family, etc). Currently, the links in my navigation bar (such as home, contact, store, etc ...

htmlcsswordpressnavigationnavbar

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Just starting out with web development and stack overflow, so please bear with me if I struggle to explain the issue. I came across some JavaScript to make my website responsive on small screens (mobiles). However, I am having trouble centering my top nav ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Automatically integrating Nivo Lightbox into your website

I incorporated Nivo Lightbox into my website, seamlessly integrating all images with the plugin using the following code: <div class="portfolio-item"> <div class="portfolio-thumb "> <a class="lightbox" data-lightbox-type="ajax" title="Strat ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to prevent Angular Material Buttons from overlapping a sticky bar when scrolling?

In my Angular application, I have a navigation bar at the top that sticks in place (position: sticky; top: 0;). Beneath the navigation bar is the content, which includes Angular material components such as mat-buttons or mat-cards. The issue arises when ...

cssangularangular-material

Utilizing CSS to Properly Position HTML Elements

Check out my code on jsFiddle I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTM ...

htmlcss

Use Jquery to locate and modify any occurrences of the div text through find and replace

Here is a screenshot I captured. https://i.stack.imgur.com/VUGEg.png This content resides inside my div. My goal is to replace "" with "-" and "" with "-" wherever they occur within the div, and then send this modified content via ajax using jQuery since ...

jqueryhtmlcssajax

Setting the CSS position to fixed for a dynamically generated canvas using JavaScript

My goal is to fix the position style of the canvas using JavaScript in order to eliminate scroll bars. Interestingly, I can easily change the style using Chrome Inspector with no issues, but when it comes to implementing it through JS, I face difficulties. ...

javascriptcsshtmlcanvas