How to operate CSS image blur effect?

Discussion in 'HTML & Website Design' started by Kirsten6, Sep 23, 2021.

  1. #1
    How to operate the cover image as the background for fuzzy processing?
     
    Kirsten6, Sep 23, 2021 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,803
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #2
    sarahk, Sep 23, 2021 IP
  3. paullancer

    paullancer Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    here you goo , thank me later :cool:

     
    paullancer, Apr 19, 2022 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,803
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #4
    A simple code sample 6 months ago would have been more helpful
     
    sarahk, Apr 19, 2022 IP
  5. OliviaWeb

    OliviaWeb Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    I recommend you to read Andy Adams' article on filter and backdrop-filter CSS properties comparison.

    https://css-tricks.com/almanac/properties/b/backdrop-filter/
     
    OliviaWeb, Apr 20, 2022 IP
  6. paullancer

    paullancer Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    haha sorry about it
     
    paullancer, Apr 26, 2022 IP
  7. jhonalbert

    jhonalbert Greenhorn

    Messages:
    28
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #7
    Hello,
    If you want the blur to have a color, you'll need to add the background property with an rgba value. Make sure that the alpha (opacity) is less than 1.
     
    jhonalbert, May 13, 2022 IP
  8. paullancer

    paullancer Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    hahaha sorry though :D
     
    paullancer, Jun 1, 2022 IP
  9. imranbashir.seo

    imranbashir.seo Active Member

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #9
    hey you can use simple css effect like if your class is:

    .image{
    width: 100%
    opacity: 0.5;
    }

    you can use opacity in css and your image will be lighter on text.
     
    imranbashir.seo, Jul 13, 2022 IP