সিএসএস ব্যবহার করে ডান দিক থেকে একটি পটভূমি চিত্র অফসেট করুন

Question

কোনও পটভূমির চিত্রটির উপাদানটির ডান দিক থেকে নির্দিষ্ট সংখ্যক পিক্সেল অবস্থানের কোনও উপায় আছে কি?

উদাহরণস্বরূপ, বাম থেকে কিছু নির্দিষ্ট পিক্সেল (বলুন, 10) অবস্থানের জন্য, আমি এটি এটি করব:

#myElement {
    background-position: 10px 0;
}

Comments

আপনি নিশ্চয়ই বোঝাতে চাইছেন না background-position: -10px 0;? শুধু চেক করা হয়েছে :)

— ত্রিশটি

আমি জানি এটির বেশ কয়েকটি সদৃশ রয়েছে তবে আমি সেগুলির কোনওটিই খুঁজে পাচ্ছি না।

— পেক্কা

@ ত্রিশটি ডট যা এটিকে বাম প্রান্ত থেকে 10 পিক্সেল রেখে দেয় moves

— নিকফ

এটি নির্বোধ যে এটি উপলব্ধ নয় ...

— জুয়ান

@ নিক আপনি কী বুঝতে পারছেন যে ২০১৩ সালের শেষের দিকে এটি বেশিরভাগ ডিভাইসে পাওয়া যায় না?

— জুয়ান

Answer 1

আমি এই CSS3 বৈশিষ্ট্যটি সহায়ক বলে মনে করেছি:

/* to position the element 10px from the right */
background-position: right 10px top;

আমি যতদূর জানি এটি আইই 8 তে সমর্থিত নয়। সর্বশেষতম ক্রোম / ফায়ারফক্সে এটি দুর্দান্ত কাজ করে।

সমর্থিত ব্রাউজারগুলিতে বিশদ জানতে আমি কী ব্যবহার করতে পারি দেখুন ।

ব্যবহৃত উত্স: http://tanalin.com/en/blog/2011/09/css3-background-position/

আপডেট :

এই বৈশিষ্ট্যটি এখন মোবাইল ব্রাউজার সহ সমস্ত বড় ব্রাউজারগুলিতে সমর্থিত।

Comments

এটি দুর্দান্ত তবে দুর্ভাগ্যক্রমে এটি সাফারি ৫.১. ((মোবাইল ফোন দ্বারা দেখা গেলে এটি অত্যন্ত গুরুত্বপূর্ণ)

— মোশি ইলিশা

এটি এখন মোবাইল ডিভাইসে (অ্যান্ড্রয়েড, আইওএস এবং উইন্ডোজফোনে চেক করা আছে) কাজ করে। তবুও সাফারি 5.1.7 এখানে প্রদত্ত পটভূমির অবস্থান সমর্থন করে না।

— জোরস্টকি 13

আমি এটি ব্যবহার করছি তবে পুরানো ব্রাউজারগুলির শতাংশ শতাংশ ফালব্যাক সহ, যেমন। পটভূমি অবস্থান: 95% কেন্দ্র; পটভূমি অবস্থান: ডান 13px কেন্দ্র;

— গ্রেগদেব

নিশ্চিত না যে কতজন লোক এখনও সমর্থন করে না পর্যাপ্ত পুরানো ব্রাউজার ব্যবহার করছে। সাফারি ব্যবহারকারীদের এখনই নতুন সংস্করণে থাকা উচিত, যদিও প্রচুর পুরানো অ্যান্ড্রয়েড ডিভাইস এখনও বাইরে রয়েছে। caniuse.com/#feat=css-background-offsets এগুলির জন্য শতাংশ ফ্যালব্যাক ব্যবহার করার পক্ষে যথেষ্ট সহজ (যদিও এটি ঠিক একই নয়)।

— চিহ্নিত করুন

দয়া করে মনে রাখবেন যে এটি কেবল তখনই কাজ করে যদি আপনি উভয় উলম্ব এবং অনুভূমিক অবস্থানের জন্য একটি কার্ডিনাল অবস্থান নির্দিষ্ট করেন right left top bottom। উদাহরণস্বরূপ, নিম্নলিখিত রেন্ডার করবে না: background-position: right 10px 10pxতবে লিখিত হওয়া উচিতbackground-position: right 10px top 10px

— ই

Answer 2

!! পুরানো উত্তর, যেহেতু CSS3 এই বৈশিষ্ট্যটি নিয়ে এসেছে

কোনও পটভূমির চিত্রটির উপাদানটির ডান দিক থেকে নির্দিষ্ট সংখ্যক পিক্সেল অবস্থানের কোনও উপায় আছে কি?

নাঃ।

জনপ্রিয় workaround অন্তর্ভুক্ত

• margin-rightপরিবর্তে উপাদান একটি সেট
• ইমেজটিতে স্বচ্ছ পিক্সেল যুক্ত করা এবং এটির অবস্থান নির্ধারণ করা top right
• অথবা উপাদানটির প্রস্থের পরে jQuery ব্যবহার করে অবস্থানের গণনা করা।

Comments

প্রসারিত CSS3 'ব্যাকগ্রাউন্ড-পজিশন' এর জন্য আরও বিস্তৃত সমর্থনটি প্রায় কোণার চারপাশে: stackoverflow.com/questions/501375/…

— ভ্লাদ ম্যাগডালিন

Answer 3

সবচেয়ে সহজ সমাধানটি শতাংশ ব্যবহার করা। আপনি পিক্সেল-নির্ভুলতার জন্য যেহেতু জিজ্ঞাসা করেছিলেন এটি হুবহু এই উত্তর নয়, তবে ডান প্রান্ত এবং চিত্রের মধ্যে কিছুটা প্যাডিংয়ের জন্য যদি আপনার কিছু দরকার হয়, তবে 99% এর অবস্থান সাধারণত কিছুটা ভালভাবে কাজ করে।

কোড:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Comments

+1 "আমরা পরের সপ্তাহে পিক্সেল প্রান্তিককরণের মধ্য দিয়ে যাব" - সর্বদা কাজ করে।

— মুনউইভ 99

এই সমাধানটি ব্রাউজারগুলিতে সবচেয়ে ধারাবাহিকভাবে কাজ করে বলে মনে হচ্ছে।

— ইভান হাশ

Answer 4

পুরানো উত্তর: এটি এখন প্রধান ব্রাউজারগুলিতে প্রয়োগ করা হয়, এই প্রশ্নের অন্যান্য উত্তরগুলি দেখুন।

CSS3 এর স্পেসিফিকেশনটি সংশোধন করেছে background-positionযাতে এটি বিভিন্ন মূল পয়েন্টের সাথে কাজ করবে। দুর্ভাগ্যক্রমে, আমি এখনও কোনও বড় ব্রাউজারে এটি প্রয়োগ করা হয়েছে এমন কোনও প্রমাণ পাই না।

http://www.w3.org/TR/css3-background/#the-background-position উদাহরণ 12 দেখুন।

background-position: right 3em bottom 10px;

Comments

ধন্যবাদ তামি! দুর্ভাগ্যক্রমে, এটি ফায়ারফক্স 4 বা ক্রোম 11 এর মধ্যে আমার পক্ষে কার্যকর হয়নি

— নিকফ

এটি অপেরাতে প্রয়োগ করা হয়েছে। ভেবেছিলাম এটি সত্য হওয়া খুব ভাল এবং তারপরে আমি অন্যান্য ব্রাউজারগুলিতে পরীক্ষা করেছিলাম এবং আমি ঠিকই ছিলাম।

— ভায়ান এস্টারহুইজন

এটি ক্রোমের বর্তমান সংস্করণে এখনও কাজ করে না। Version 21.0.1180.89

— andlrc

Chrome ক্যানারি (v26) এখন এটি সমর্থন করে। এটি একবার মুক্তির চ্যানেলে নেমে আসে এবং সাফারি তাদের ইঞ্জিন আপডেট করে, কেবল আইআই 6-8 এর সমর্থন অভাব হবে (আই 9 9/10 ইতিমধ্যে নতুন ফর্ম্যাটটিকে সমর্থন করে)।

— ভ্লাদ ম্যাগডালিন

এটি কেবল পরীক্ষিত হয়েছে এবং এটি এখন ফায়ারফক্স (v.18.0.2), আইই (v.9.0.8) এবং ক্রোমে (v.25.0.1364.97) কাজ করছে, তবে এটি এখনও সাফারিতে কাজ করছে না (v.5.1.2) । এটি কখন চালু হতে পারে তা যদি কেউ জানে কিনা জানতে আগ্রহী ;-)

— ছায়া কুপার

Answer 5

এখানে প্রস্তাবিত হিসাবে , এটি একটি দুর্দান্ত ক্রস ব্রাউজার সমাধান যা পুরোপুরি কার্যকর হয়:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

প্রশ্নটি সমাধান হিসাবে চিহ্নিত হওয়া উত্তরে প্রস্তাবিত অফসেটগুলি নির্দিষ্ট করার CSS3 বৈশিষ্ট্যটি ব্রাউজারগুলিতে এখনও এতটা সমর্থনযোগ্য নয় বলে আমি এটি ব্যবহার করেছি। যেমন

Comments

আমার যখন এই সীমানাটি নির্দিষ্ট রঙের হওয়া দরকার তখন কী হবে?

— মেশিনাদিক্ট

এটি দুর্দান্ত উত্তর কারণ ক্রস ব্রাউজারটি সামঞ্জস্য রেখে আপনার পিক্সেল যথার্থতা থাকতে পারে। ধন্যবাদ! (এবং যদি আপনি কোনও নির্দিষ্ট রঙের একটি সীমানা চান তবে ইনপুটটি মোড়ানোর জন্য কোনও প্রকারের একটি মোড়ক ব্যবহার করুন এবং সেই উপাদানটিতে সীমানা যুক্ত করুন))

— গাভিন

Answer 6

সবচেয়ে উপযুক্ত উত্তর পশ্চাদপট-পদের জন্য নতুন চার মান সিনট্যাক্স, কিন্তু পর্যন্ত ব্রাউজার এটিকে সমর্থন করে আপনার সেরা পদ্ধতির নিম্নলিখিত জন্য আগেই প্রতিক্রিয়া সংমিশ্রণ:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

Answer 7

একটি সাধারণ তবে নোংরা কৌশলটি আপনি যে চিত্রটি পটভূমি হিসাবে ব্যবহার করছেন তাতে কেবল অফসেট যুক্ত করা। এটি রক্ষণাবেক্ষণযোগ্য নয়, তবে এটি কাজটি সম্পন্ন করে।

Answer 8

এটি বেশিরভাগ আধুনিক ব্রাউজারে কাজ করবে ... আইই (ব্রাউজার সমর্থন) ব্যতীত । যদিও পৃষ্ঠাটি> = আই 9 সমর্থিত হিসাবে তালিকাবদ্ধ রয়েছে, তবুও আমার পরীক্ষাগুলি এর সাথে একমত নয়।

আপনি এর মতো ক্যালক () সিএসএস 3 সম্পত্তি ব্যবহার করতে পারেন;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

আমার জন্য এটি ডান দিকের মার্জিন অর্জনের সবচেয়ে পরিষ্কার এবং সর্বাধিক যৌক্তিক উপায়। আমি border-right: 10px solid transparent;IE এর জন্য ফ্যালব্যাক ব্যবহার করি ।

Comments

এটি দুর্দান্ত তবে দুর্ভাগ্যক্রমে এটি সাফারি 5.1.7 এ কাজ করে না (যা মোবাইল ফোন দ্বারা দেখা হয় যা অত্যন্ত গুরুত্বপূর্ণ)

— মোশিএলিশা

তারপরে আপনার একটি সাফারিতে কাজ করে এমন একটি পটভূমি অবস্থান এবং এটি ব্যবহার করতে পারে এমন ব্রাউজারগুলির দ্বারা ওভাররাইড করা যেতে পারে। উদাহরণস্বরূপ: background-position: 92% 8px; background-position: calc(100% - 12px) 8px;

— লাকি পোলাইটিস

ডুড সমস্ত ব্রাউজারে কাজ করে না। right 10px centerসিনট্যাক্স ব্রাউজার আরও বর্ধিত সমর্থন আছে।

— ফরজাদ ওয়াইজেড

দয়া করে প্রথম লাইনটি পড়ুন যেখানে আমি এটি "সর্বাধিক আধুনিক ব্রাউজারগুলিতে" কাজ করি। আমি কখনই বলিনি যে এটি তাদের সবগুলিতে কাজ করে।

— নভোচেন

ক্যানিউজ অনুসারে, একটি ক্যালকের ব্যবহারের ফলে আইই 9 ক্র্যাশ হয়ে যাবে ... একবার আপনি যখন এর _সাথে প্রতিস্থাপন করলেন-

— রাসকিন

Answer 9

ঠিক আছে যদি আমি বুঝতে পারি যে আপনি কী জিজ্ঞাসা করছেন এটি এটি করবে;

আপনার কাছে আপনার ডিআইভি কনটেইনার কল রয়েছে #main-containerএবং .my-elementএটি এর মধ্যেই রয়েছে। আপনাকে শুরু করতে এটি ব্যবহার করুন;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

যাইহোক, আপনি যদি কোনও পৃষ্ঠার মধ্যে নিম্ন স্তরের উপাদানটি উল্লেখ করেন তবে ক্লাসগুলি ব্যবহার করা ভাল better

Answer 10

ব্যাকগ্রাউন্ড-পজিশনের জন্য বিভিন্ন উত্সের অনুমতি দেয় সিএসএস 3 স্পেসিফিকেশন এখন ফায়ারফক্স ১৪ এ সমর্থিত তবে এখনও ক্রোম 21-তে নেই (দৃশ্যত আই 99 আংশিকভাবে এগুলিকে সমর্থন করে, তবে আমি নিজে এটি পরীক্ষা করেছি না)

ক্রোম ইস্যু ছাড়াও যে @ ম্যাটিএফ রেফারেন্স করেছে এখানে আরও একটি সংক্ষিপ্তসার সংক্ষিপ্তসার রয়েছে: http://code.google.com/p/chromium/issues/detail?id=95085

Comments

আমি এটি এখনই পরীক্ষা করেছি এবং এটি এখন ফায়ারফক্স (v.18.0.2), আইই (v.9.0.8) এবং ক্রোমে (v.25.0.1364.97) কাজ করছে, তবে সাফারিতে নয় (v.5.1.2)

— ছায়া কুপার

Answer 11

আপনার যদি আনুপাতিক উপাদান থাকে তবে আপনি ব্যবহার করতে পারেন:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

এই উদাহরণে, .validছবি সহ শ্রেণি .halfহবে এবং স্ট্যান্ডার্ডটির অর্ধেক আকারের এক সারি হবে।

নোংরা, তবে একটি কবজ হিসাবে কাজ করে এবং এটি যুক্তিযুক্তভাবে পরিচালনাযোগ্য।

Comments

আমার ক্ষেত্রে (একটি নির্দিষ্ট প্রস্থের লেআউট ব্যবহার করে) এটি আমার যা প্রয়োজন ঠিক তা করে। ধন্যবাদ।

— গ্যাভিন

Answer 12

আপনি যদি উদাহরণস্বরূপ কোনও বোতামে তীর / অন্যান্য আইকন যুক্ত করার জন্য এটি ব্যবহার করতে চান তবে আপনি সিএসএস সিউডো-উপাদান ব্যবহার করতে পারবেন?

যদি এটি সত্যিই পুরো বোতামটির ব্যাকগ্রাউন্ড-চিত্র হয় তবে আমি স্পেসটি চিত্রটিতে অন্তর্ভুক্ত করি এবং কেবল ব্যবহার করি

background-position: right 0;

তবে যদি আমি উদাহরণস্বরূপ একটি বোতামে একটি নকশাকৃত তীর যুক্ত করতে হয় তবে আমার এই এইচটিএমএল রয়েছে:

<a href="[url]" class="read-more">Read more</a>

এবং সিএসএস সহ নিম্নলিখিতগুলি করার ঝোঁক:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

নির্বাচক পরে: ব্যবহার করে, আমি এই ছোট আইকনটি ধারণ করতে কেবল CSS ব্যবহার করে একটি উপাদান যুক্ত করি। আপনি এ <i>-এলিমেন্টের ভিতরে কেবল একটি স্প্যান বা উপাদান যুক্ত করে এটি করতে পারেন । তবে আমি মনে করি এটি বোতামগুলিতে আইকন যুক্ত করার একটি পরিষ্কার উপায় এবং এটি ক্রস ব্রাউজার সমর্থিত।

আপনি এখানে ঝাঁকুনিটি দেখতে পারেন: http://codepen.io/anon/pen/PNzYzZ

Comments

এটি content: ''; বরং হওয়া উচিত content:0;তবে এটি আমার জন্য একটি কার্যকর সমাধান ছিল

— নাট

Answer 13

background-position: calc(100% - 8px);

Answer 14

কেন্দ্র হিসাবে ঠিক পজিশন হিসাবে ব্যবহার করুন তারপর এটি অফসেটে স্বচ্ছ সীমানা যুক্ত করুন?

Comments

এটি খারাপ নয়, তবে লিখিত সামগ্রীটি ডান থেকে স্থানান্তরিত হবে। এটি ডিল ব্রেকার হতে পারে বা নাও হতে পারে। এটি দেখতে কেমন তার উদাহরণ এখানে দেওয়া হয়েছে: jsbin.com/ijewoq/1

— নিকফ

মনে করুন এটি সামান্য বিচার এবং ত্রুটির সাথে ভারসাম্য রক্ষার ক্ষেত্রে :) আশা করি এটি কার্যকর হয়েছে!

— আন্দ্রে ফিগুয়েরা

Answer 15

আপনার যদি স্থির প্রস্থের উপাদান থাকে এবং আপনার পটভূমির চিত্রের প্রস্থটি জানেন তবে আপনি কেবল ব্যাকগ্রাউন্ড-অবস্থানটি এটিতে সেট করতে পারেন: উপাদানটির প্রস্থ - চিত্রের প্রস্থ - ডানদিকে আপনি যে ফাঁকটি চান তা।

উদাহরণস্বরূপ: ডানদিকে 10px এর ফাঁক পেতে 100px- প্রশস্ত উপাদান এবং 300px-প্রশস্ত চিত্র সহ, আপনি এটি 100-300-10 = -210px এ সেট করেছেন:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

এবং আপনি আপনার উপাদানের বাম দিকে আপনার চিত্রের ডানদিকে 80 পিক্সেল এবং ডানদিকে 20px এর ফাঁক পেতে পারেন।

আমি জানি এটি নির্বোধ শোনাতে পারে তবে কখনও কখনও এটি সময় সাশ্রয় করে ... আমি চিত্রের নীচে পাঠ্যের সাথে নেভিগেশন লিঙ্কগুলির জন্য উল্লম্ব পদ্ধতিতে (নীচে ফাঁক) এগুলি অনেকগুলি ব্যবহার করি।

যদিও এটি আপনার ক্ষেত্রে প্রযোজ্য তা নিশ্চিত নয়।

Answer 16

আমার সমস্যাটি ছিল আমার উইন্ডোটি পুনরায় আকার দেওয়ার সময় ডান সীমানা থেকে একই দূরত্বে অবস্থানের জন্য পটভূমি চিত্রের প্রয়োজন ছিল যেমন ট্যাবলেট / মোবাইল ইত্যাদির জন্য আমার ফিক্সটি এই জাতীয় পার্সেন্টেজ ব্যবহার করা উচিত:

background-position: 98% 6px;

এবং এটি জায়গায় লাঠি।

Comments

এটি এমন পরিস্থিতিতে কাজ করতে পারে যেখানে আপনি উইন্ডোটির মাত্রাগুলি ঠিকঠাক জানেন তবে ওয়েবে বেশিরভাগ সময় আপনি তার সম্পর্কে নিশ্চিত হতে পারবেন না। গৃহীত উত্তরটি একবার দেখুন যা সমস্ত পরিস্থিতিতে (সমর্থিত ব্রাউজারগুলিতে) কাজ করবে।

— নিকফ

Answer 17

হ্যাঁ! ব্রাউজারের ডান-হাতের দিক থেকে বামের পরিবর্তে একটি পটভূমি চিত্র যেমন পজিশন করা ভাল - আমি ব্যবহার করি:

background-position: 100% 0px;