question about opacity

  • Zaralene

    (@zaralene)


    10 years ago

    Hi, I am working with Codium Grid (awesome theme for magazines!) and I have a CSS question about opacity.
    This is the website I am currently working on: https://marcelineke.nl

    I made the background of the content and background posts (they appear in the category with blocks) somewhat transparent with 0.9. Would it be possible to exclude pictures from that and fonts so they will stay sharp? Because if I put 0.9 under background, everything becomes transparent.

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • stephencottontail

    (@stephencottontail)

    Instead of setting the opacity for the entire <div>, you could instead set the opacity of the background color using rgba():

    .posthome {
background-color: rgba(255,255,255,0.8);
}
    Thread Starter Zaralene

    (@zaralene)

    Thanks Stephen, that works ??

    Thread Starter Zaralene

    (@zaralene)

    here I am again. It works for the blocks, but I can’t get it to work for the body content. For instance:
    https://marcelineke.nl/mosselen-saai-echt-niet/

    The code is now:
    ‘body {
    font:62.5% Helvetica, Verdana, Arial, Sans-Serif;
    color:#6d6d6d;
    background-color: rgba(255, 255, 255, 0.9)
    background-repeat:repeat-x;
    background-attachment:fixed;

    }’

    For some reason the content is still opaque. I just want the pictures and text to be opaque and the background 0.9 opacity.

    stephencottontail

    (@stephencottontail)

    It won’t work to set the background color on <body>. Instead, you should remove the background-color from body { ... } and set it on #content { ... } instead:

    #content {
background-color: rgba(255,255,255,0.9) !important;
}

#content .wp-caption {
background-color: rgba(255,255,255,0.9) !important;
}

    Also, you shouldn’t be editing the theme files directly. If the theme was ever updated, to fix security issues or bugs or to add new features, your changes would be lost. If your theme has a built-in custom CSS option, use it; otherwise, get a custom CSS plugin.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘question about opacity’ is closed to new replies.