1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to operate CSS image blur effect?

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

0
  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,500
    Likes Received:
    4,460
    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,500
    Likes Received:
    4,460
    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