আমি যা করার চেষ্টা করছি তা উভয়ই প্রদর্শন করা background-colorএবং background-imageযাতে আমার অর্ধেকটি divডান ছায়ার পটভূমির চিত্রটি coverেকে দেয় এবং অন্য বাম অংশটি ব্যাকগ্রাউন্ডের রঙটি coverেকে দেয়।
তবে আমি যখন ব্যবহার করি তখন background-imageরঙটি অদৃশ্য হয়ে যায়।
উত্তর:
কোনও উপাদানের পটভূমি হিসাবে রঙ এবং চিত্র উভয়ই ব্যবহার করা একেবারে সম্ভব।
আপনি স্টাইল background-colorএবং সেট করেছেন background-image। চিত্রটি যদি উপাদানটির চেয়ে ছোট background-positionহয় তবে আপনার ডানদিকে রাখার জন্য background-repeatশৈলীটি ব্যবহার করতে হবে এবং আপনি শৈলীটি পুরো পটভূমিটি পুনরাবৃত্তি এবং আবরণ থেকে রক্ষা করতে হবে :
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;বা সম্মিলিত শৈলী ব্যবহার background:
background: green url(images/shadow.gif) right no-repeat;আপনি যদি backgroundউভয়কে পৃথক করে সেট করতে সমন্বিত শৈলী ব্যবহার করেন তবে কেবল সর্বশেষটি ব্যবহৃত হবে, এটিই আপনার রঙটি দৃশ্যমান না হওয়ার একটি সম্ভাব্য কারণ:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;পটভূমির চিত্রটি কেবলমাত্র উপাদানের অংশকে কভার করার জন্য নির্দিষ্টভাবে সীমাবদ্ধ করার কোনও উপায় নেই, সুতরাং আপনাকে নিশ্চিত করতে হবে যে চিত্রটি উপাদানটির চেয়ে ছোট, বা এর কোনও স্বচ্ছ অঞ্চল রয়েছে, পটভূমির রঙটি দৃশ্যমান হওয়ার জন্য।
background: -webkit-linear-gradient(bottom, rgb(222,222,222) 19%, rgb(201,201,201) 50%, rgb(219,219,219) 80%); AND background-image: url(icon.png) no-repeat right;গ্রেডিয়েন্ট এবং চিত্র-আইকন উভয়ই কীভাবে প্রয়োগ করব তা আমি ব্যবহার করতে চাই । সাহায্য করুন.
background:সাধারণভাবে সংক্ষেপে এবং তারপর অনুমান কোন ইমেজ নিদিষ্ট আছে এবং উপর পদচারনাbackground-image
কোনও চিত্রকে রঙিন করার জন্য, আপনি backgroundচিত্রগুলি স্ট্যাক করার জন্য CSS3 ব্যবহার করতে পারেন এবং এ linear-gradient। নীচের উদাহরণে, আমি linear-gradientকোনও প্রকৃত গ্রেডিয়েন্ট সহ একটি ব্যবহার করি । ব্রাউজারটি গ্রেডিয়েন্টকে চিত্র হিসাবে বিবেচনা করে (আমি মনে করি এটি আসলে একটি বিটম্যাপ তৈরি করে এবং এটি ওভারলে করে) এবং এইভাবে, একাধিক চিত্রকে স্ট্যাক করে।
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;আপনার পিএনজি থাকলে হালকা নীল রঙের একটি গ্রাফ-পেপার আসবে। মনে রাখবেন যে স্ট্যাকিং অর্ডারটি আপনার মানসিক মডেলের বিপরীতে কাজ করতে পারে, প্রথম আইটেমটি শীর্ষে রয়েছে।
মজিলার দুর্দান্ত ডকুমেন্টেশন, এখানে:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
গ্রেডিয়েন্টগুলি তৈরির জন্য সরঞ্জাম:
http://www.colorzilla.com/gradient-editor/
দ্রষ্টব্য - আই 11 এ কাজ করে না! আমি কেন একটি আপডেট পোস্ট করব যখন এটি কেন, তার অনুমিত হওয়ার পরে।
ব্যবহার
background:red url(../images/samle.jpg) no-repeat left top;এবং এই উত্তর যুক্ত করতে , নিশ্চিত করুন যে চিত্রটি নিজেই স্বচ্ছ পটভূমি রয়েছে।
এখানে ব্যবহার background-imageএবং background-colorএকসাথে একটি উদাহরণ :
.box {
background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
display: inline-block;
}<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>আসলে আপনি পটভূমির চিত্র সহ একটি পটভূমি রঙ ব্যবহার করতে পারেন একটি উপায় আছে। এই ক্ষেত্রে, ব্যাকগ্রাউন্ড অংশটি সাদা / স্বচ্ছ রঙের পরিবর্তে সেই নির্দিষ্ট রঙ দিয়ে পূর্ণ হবে।
এটি অর্জন করার জন্য, আপনাকে backgroundএই জাতীয় সম্পত্তি সেট করতে হবে :
.bg-image-with-color {
background: url("example.png") no-repeat, #ff0000;
}কমা এবং রঙ কোড পরে নোট করুন no-repeat; এটি আপনার ইচ্ছামত পটভূমির রঙ সেট করে।
আমি এই ইউটিউব ভিডিওতে এটি আবিষ্কার করেছি , তবে আমি কোনও উপায়ে সেই চ্যানেল বা ভিডিওর সাথে অনুমোদিত নই।
চিত্রটির অর্ধেক স্বচ্ছ করুন যাতে এটির মাধ্যমে পটভূমির রঙটি দেখা যায়।
অন্যটি কেবল একটি ডিভ যোগ করুন যা কন্টেইনার ডিভিও 50% পর্যন্ত নিয়ে যায় এবং এটি বাম বা ডানদিকে ভাসিয়ে দেয়। তারপরে এটিতে ছবি বা রঙটি প্রয়োগ করুন।
গেকো একটি অদ্ভুত বাগ যেখানে সেটিং রয়েছে background-colorজন্য htmlনির্বাচক আপ আবরণ হবে background-imageশরীর উপাদান যদিও এর bodyউপাদান কার্যকরী অধিক Z-সূচক এবং আপনি উচিত শরীরের দেখতে পাবে background-imageসহ html background-colorসহজ যুক্তিবিজ্ঞান উপর ভিত্তি করে বিশুদ্ধরূপে।
গেকো বাগ
নিম্নলিখিতগুলি এড়িয়ে চলুন ...
html {background-color: #fff;}
body {background-image: url(example.png);}কাজ প্রায়
body {background-color: #fff; background-image: url(example.png);}সবাইকে হ্যালো আমি ব্যাকগ্রাউন্ড-ইমেজ এবং ব্যাকগ্রাউন্ড-রঙ একত্রিত করার জন্য আরও একটি উপায় চেষ্টা করেছি:
এইচটিএমএল
<article><canvas id="color"></canvas></article>সিএসএস
article {
height: 490px;
background: url("Your IMAGE") no-repeat center cover;
opacity:1;
}
canvas{
width: 100%;
height: 490px;
opacity: 0.9;
}অবশ্যই JAVASCRIPT
window.onload = init();
var canvas, ctx;
function init(){
canvas = document.getElementeById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillstyle = '#00833d';
ctx.fillRect(0,0,490,490);ctx.restore();
}ধন্যবাদ যদি এটি আপনার জন্য কাজ করে তবে আমাকে জানান
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;background: red url(directoryName/imageName.extention) bottom left no-repeat;