Background Colour Being Overridden-CodePudding

I am trying to create a transparent image text over an image.

I was able to display the transparent image text, but noticed that one of the background colours is being overridden after using the "Inspect" tool.

The following shows this happening: overridden background color

The following is the source code inside the HTML file:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'styles/city.css' %}" type="text/css"/>
</head>
<body>
    <div >
        <!--The required alt attribute specifies an alternate text
            for an image, if the image cannot be displayed.-->
        <img src="{% static '/images/buenos-aires-panorama.jpg' %}" alt="Buenos Aires Panorama"/>

        <div >
            <h1 style="font-size: 2em; color: lightblue">Buenos Aires</h1>
            <br>
            <u>Faux Pas</u>
        </div>
    </div>
</body>
</html>

The name of the class inside the city.css file that is responsible for displaying the transparent image is the "text-block" class.

overridden image

By looking at the image of using the "Inspect" tool, we can see that the following line is crossed out which means that it is being overridden:

background: rgb(0, 0, 0);

Can someone please explain why this is being overridden? Thank you!

The following is the city.css file:

/*The following line will make sure that the black background
  and the image vertically align.*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
}

.container img {
    vertical-align: middle;
    background-size: cover;

    /*The height was set to "auto" in order to preserve the
      aspect ratio of the background image.*/
    height: auto;
    width: 100%;
}

.container .content {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 350px;
    height: 100%;
    padding: 20px;
}

.text-block {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    padding: 20px;
}

u {
    font-size: 20px;
}

li {
    color: #FFFFFF;
}

a.videos:link {
    color: lightblue;
    text-decoration: underline;
    font-size: 20px;
}

a.videos:visited {
    color: lightblue;
    text-decoration: underline;
}

a.videos:hover {
    color: lightblue;
    text-decoration: underline;
    font-style: italic;
}

a.videos:active {
    color: lightblue;
    text-decoration: underline;
}

/*Unvisited link.*/
a:link {
    color: lightblue;
    text-decoration: underline;
    font-family: Courier, monospace;
}

/*The link after it has been clicked.*/
a:visited {
    color: lightblue;
    text-decoration: underline;
}

/*When the linked is hovered over.*/
a:hover {
    color: lightblue;
    text-decoration: underline;
    font-style: italic;
}

/*When the link is clicked, but not released.*/
a:active {
    color: lightblue;
    text-decoration: underline;
}

CodePudding user response：

In css, lower lines override higher lines. That is why its name is Cascading Style Sheets. You have set 'background' twice in .text-block, so the second 'background' sets for class.

You can add !important to the end of properties. This will avoid to lower lines override higher lines.

CodePudding user response：

It is being overridden because you have defined the "background" tag twice in .text-block. Remove the background tag that you have labeled as "Fallback color" and you should be good to go. If you would like to define the color in your background tag you can add it into the rgba function i.e. rgba (RED, GREEN, BLUE, ALPHA/opacity).

CodePudding user response：

This is expected based on how CSS works. Any style or property you add gets read from top to bottom. Stuff at the top is usually where you specify basic styling (and is added first). When you add properties after, your browser will check to see if there is an element matching your class, then check what properties it has. If it sees new styling, the browser will assume you want to use this instead and will override any existing styles.

e.g.

body { color: red; }

body { color: blue; }

body { color: green; }

When the browser reads this, first it sees that you have set the colour to red; then it sees that it needs to be made blue, and finally see's that it should be green.

More details can be read on the Mozilla Developer Network (MDN) here.

In your case, remove the line background: rgb(0, 0, 0); /* Fallback color */