সিএসএস ব্যবহার করে কীভাবে পটভূমি গা dark় করবেন?

Question 1

এটিতে পাঠ্য সহ আমার একটি উপাদান রয়েছে। আমি যখনই অস্বচ্ছতা হ্রাস করব তখন আমি পুরো দেহের অস্বচ্ছতাটি কমিয়ে দেব। আমি কেবল আরও background-imageগা dark় করতে পারি এমন কোনও উপায় আছে , এবং সমস্ত কিছু নয়?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

Question 2

আপনার ইমেজ সিএসএসে এই কোডটি যুক্ত করুন

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
    }

স্নিপেট প্রসারিত করুন

রেফারেন্স: লিনিয়ার-গ্রেডিয়েন্ট () - সিএসএস | এমডিএন

আপডেট: সমস্ত ব্রাউজার আরজিবিএ সমর্থন করে না, তাই আপনার 'ফ্যালব্যাক রঙ' হওয়া উচিত। এই রঙ সম্ভবত কঠিন (পুরোপুরি অস্বচ্ছ) প্রাক্তন হতে হবে: background:rgb(96, 96, 96)। আরজিবিএ ব্রাউজার সমর্থনের জন্য এই ব্লগটি দেখুন ।

Question 3

একটি ব্যবহার করুন: পরিকল্পিত উপাদান পরে:

.overlay {
    position: relative;
    transition: all 1s;
}

.overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.5);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.overlay:hover:after {
    opacity: 0;
}

আমার কলমটি দেখুন>

http://codepen.io/craigocurtis/pen/KzXYad

Question 4

সেট background-blend-modeথেকে darkenউদ্দেশ্য কিন্তু আপনি একটি সেট করতে হবে অর্জনে সবচেয়ে সরাসরি এবং সংক্ষিপ্ত রাস্তা হবে background-colorকাজ মিশ্রন মোডের জন্য প্রথম।
আপনার যদি পরে জাভাস্ক্রিপ্টে মানগুলি পরিচালনা করতে হয় তবে এটি সর্বোত্তম উপায়।

background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;

আমি কি ব্যাকগ্রাউন্ড-মিশ্রণের জন্য ব্যবহার করতে পারি?

Question 5

এটি দিয়ে এটি করা সম্ভব হতে পারে box-shadow

তবে, আমি এটি কোনও চিত্রের জন্য প্রয়োগ করতে পারি না। শুধুমাত্র শক্ত রঙের পটভূমিতে

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.mycooldiv {
  width: 400px;
  height: 300px;
  margin: 2% auto;
  border-radius: 100%;
}
.red {
  background: red
}
.blue {
  background: blue
}
.yellow {
  background: yellow
}
.green {
  background: green
}
#darken {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
  /*darkness level control - change the alpha value for the color for darken/ligheter effect */
}

Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>

স্নিপেট প্রসারিত করুন

Question 6

আপনি আপনার পটভূমির জন্য ধারকটি ব্যবহার করতে পারেন, এটি পরম এবং নেতিবাচক জেড-সূচক হিসাবে স্থাপন করা হয়েছে: http://jsfiddle.net/2YW7g/

এইচটিএমএল

<div class="main">
    <div class="bg">         
    </div>
    Hello World!!!!
</div>

সিএসএস

.main{
    width:400px;
    height:400px;
    position:relative;
    color:red;
    background-color:transparent;
    font-size:18px;
}
.main .bg{
    position:absolute;
      width:400px;
    height:400px;
    background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
    z-index:-1;
}

.main:hover .bg{
    opacity:0.5;
}

Question 7

ইতিমধ্যে এখানে যা আছে তা যুক্ত করতে নিম্নলিখিত ব্যবহার করুন:

background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");

... 70% লিনিয়ার-গ্রেডিয়েন্ট ওভারলে ক্রস ব্রাউজারের সমর্থনের জন্য। চিত্রটি আলোকিত করতে, আপনি সেগুলির সমস্তগুলিকে 0,0,0'গুলি' তে পরিবর্তন করতে পারেন 255,255,255। যদি 70% কিছুটা বেশি হয় তবে এগিয়ে যান এবং এটিকে পরিবর্তন করুন .7। এবং, ভবিষ্যতের রেফারেন্সের জন্য এটি পরীক্ষা করে দেখুন: http://www.colorzilla.com/gradient-editor/

Question 8

আপনি যখন উজ্জ্বলতা বা পটভূমির রঙের গা to় করতে চান, আপনি এই সিএসএস কোডটি ব্যবহার করতে পারেন

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

Question 9

আমার জন্য ফিল্টার / গ্রেডিয়েন্ট পদ্ধতির কাজ হয়নি (সম্ভবত বিদ্যমান সিএসএসের কারণে) তাই আমি এর :beforeপরিবর্তে সিউডো স্টাইলিং ট্রিকটি ব্যবহার করেছি:

.eventBannerContainer {
    position: relative;
}
.eventBannerContainer:before {
    background-color: black;
    height: 100%;
    width: 100%;
    content: "";
    opacity: 0.5;
    position: absolute;
    display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
    position: relative;
}

Question 10

এটি আমার সর্বাধিক সহজ উপায়

  background: black;
  opacity: 0.5;